Learn The MERN Stack

Learn The MERN Stack [8] – Prepare & Deploy

alright guys so we've built our full stack myrn app and now I want to deploy it alright but before we do that just a couple small things I want to to deal

with so right here you see on an item reducer UUID is defined but never used so I'm just gonna go to my item reducer and get rid of that import because we don't need that and then another thing

I'm gonna do is go to my public folder index.html and just change the title from react app to burn shopping list ok so save that and now we're gonna get ready to deploy now we're going to be

using Heroku and with react when you build a front-end application there's a script with create react app and if we look in our client package.json close these up package dot jason we have this

build so we can do npm run build and that'll take our react application and build it out into static assets that we could just upload to any server if it was just a front-end app but this is not

this is a full stack app we have an entire node server that an API that we have to deal with as well so that's where Heroku comes in now I'm gonna just stop this server here with ctrl C and

this is the by the way this was the NPM run Deb it was running the cert the front end and the back end and what we want to do is let me just show you if we run NPM if we go into the client folder

so CD client and we do NPM run build you don't have to do this but you can if you want it's going to take our react application and put it into a folder called it I'm sorry not dist build and

if we look in that it's still running but once it's done you'll see that we have an index.html and this file points to this static j/s main dot and then some numbers dot j s and if we look at

that file so static j s main all these numbers dot j s this is basically everything we've done compiled and there's there's no way that we can read this or understand this at least

for me this is complete gibberish but this is what is actually going to be loaded now up to this point what we've been doing to basically have our front-end and back-end work together as

we've had two servers we've had the backend server and then we've had the the the front-end dev server that create react app gives us that's that 3000 port server now on Heroku we're not going to

have access to that dev server that front-end dev server it's gonna look at our back-end server j/s file which will run on on Heroku support but what we need to do is basically say unless we're

hitting our API which is API slash items or anything at any other API routes we had in here then we want to hit the index.html file right here to load our front-end so we're gonna have to edit

this server JS file just a little bit and we're in the build right here the build folder we're not going to do the NPM run build manually what I want to do is create a post build script that will

make it so that once we push to Heroku it'll then automatically do the build there instead of us having to do it and push it to Heroku so we can actually go ahead and delete this build file if

you've been following along we can delete that we don't need it let's see delete build from shore and then we're gonna edit this server JS file just a little bit so we're gonna go underneath

our last these routes right here above where we created the port and we want to basically serve our static assets which is that build folder if we're in production okay so the way that we can

do this is by using an if statement and we can check to see if we're in production by using process dot e NV dot node underscore env so we're going to look at our No

if it equals production okay so if it equals production then we want to set a static folder now to set this static folder we're just going to say app dot use and you guys have probably done this

if you've if you have experience with express we say Express dot static and we want the folder it's a bit that that's a load to be client slash build so it'll load the index.html in client build

which is what I just showed you and then down here we want to say apt-get so basically apt-get anything so we can use an asterisk err then we want let's put in here request response and inside here

what we want to do is just load that index.html file alright so this is actually setting the folder the static folder here we're gonna any request that we get that's not this should load up

that index.html now I'm going to bring in a another module called path which is a core node.js module so it's not we don't have to do n p.m. install path or anything like that so we're gonna just

require it path and it's just to deal with file paths and what we want to do is we want to take the response here and we're gonna do dot send file and inside this send file we're going to use path

dot resolve ok so we're using that path module and then we want the current directory so double underscore dur name and then we want to go into client and into build

and then we want to load the index.html file ok so we kind of load these as parameters and it's just basically directing it to that index.html file and it should load it unless it's hitting

the yeah okay and as long as it's in production so I think that that should do it let's go ahead and save this now what I want to do is create the post

build script so the post build script is going to go in our package jason of the server okay make sure it's not your react application make sure it's the server where we have the this

concurrently and stuff like that and what we'll do is we'll go right under here we'll put a comma there and we're gonna call this Heroku – post build and we want to set this – and this is gonna

look a little weird but we're gonna do NPM underscore config underscore production equals false now you may be asking why are we setting production defaults the reason for that is because

it's not going to it's not going to run the build script if it's not if it's in production so we have to set that to false just for this script once this is done it'll be in production but we have

to set this flag right here for this to work correctly so we want to set that defaults then we want to run NPM install should only be one space here so NPM install and we want to make sure this is

happening in the client folder so we're gonna do prefix dash – prefix client and then we want to do double ampersand because we will also want to do NPM run build and this is going to happen on the

server and we want to again make sure this is in the client folder so we want to prefix with client okay so hopefully that makes sense one second we just make sure this is

right so prefix client alright so once we have that let's go ahead and save so production Falls NPM install so basically it's just going to go into our into the client folder it's going to

install the dependencies it's going to and run npm run build so now let's get Heroku ready so we'll close this up close that up and let's go to chrome and you're gonna want the Heroku CLI okay

and this is cross-platform I'm on a Mac so I'm gonna click download the installer you can also use homebrew I think I might actually have it installed I'm not sure because I can't remember

the last time I used Heroku on this particular machine but I'll just install it again anyways just in case so let's see it's fine and install and by the way we do all this in the udemy course as

well and I explain things a little better because it's not it's not so much off the top of my head alright so that's installed I'm gonna just move the Installer to the trash that's not that

doesn't matter so now we have the Heroku CLI installed and we should be able to run Heroku commands so you need to sign up obviously so go to Heroku comm log in once you log in you'll probably see

something like this you can see I do have a couple applications here you'll probably if you just signed up you won't have anything here but then what we want to do is go to our terminal ok so you

want to be in your not in your client folder you want to be in the server and we're gonna say Heroku login login credentials so that is correct than my credentials so you just want to gonna

want to put your Heroku ID in whoops that was wrong try that again email it's good okay so now I'm logged into Heroku in the CLI now what I want to do is create

a new Heroku app from this directory so we want to say Heroku create and then it's going to give you some weird-ass name like the secure Cove or whatever and now if I go back to my Heroku

dashboard and reload it you can see right here secure Cove so you should now have this in your dashboard and not secure Cove some other weird-ass name you can see some of the other ones that

they've given me but we want to click on that and go to deploy now the way the method that we use to deploy to Heroku is with git okay so make sure you have get installed whether you installed it

on a Mac with with homebrew or you use git bash or whatever it may be you want to have git installed and then you can see we already did this we logged in we want to initialize the git repository

I've already done this I've actually been making commits behind the scenes but you want to do get an it to initialize you get repository and then you want to add your Heroku repository

as a remote repository so I want to copy this okay you want to copy whatever is right here and go back to your terminal and let's clear this up and let's you know what so you again you want to do

get in it if you haven't already and then what I'm going to do is just add what I what I haven't added yet so I'm gonna say at all and then let's do a git commit I'm gonna have the AM flag and

then I'm just gonna say version 1.0.0 whatever you can put whatever you want and then let's paste in what we just copied from Heroku okay so now we should be able to push to Heroku by saying get

push Heroku master and now once I hit enter and we pushed to it it should run that put that poll build script hopefully so let's try it okay so building dependencies installing

node modules we should see something about the build script right here so this is the area here Heroku post build running Heroku post build hopefully everything works out these are the cross

your fingers moments okay let's go let's go all right let's see looks good so far so good creating an optimized production belt and I think it's gonna work

hopefully all right build succeeded you can see there's a lot of room for screw-ups all right deployment done all right so now what we want to do is try the application so let's see if we go to

open app let's cross our fingers and there it is there's our deployed application so let's make sure it actually works so we can see that it's actually listing stuff let's delete milk

okay and just to reload make sure that it's actually deleted from the database let's add an item we'll go ahead and add eggs add item and there it is we'll reload and now we have a deployed myrn

stack application and of course I mean this is an ugly URL so are an ugly domain if you wanted to you could go into settings you can go down to domains you can add a domain and of course

you'll have to register it somewhere and then what you would do is just point the cname to where is it custom domains allow you there's a documentation page that shows you exactly how to do it

right here you need to point your dns to Heroku so just follow this if you want to add an actual domain name but it is deployed it is live on the internet and I'm not going to leave this up because I

know people will spam it and probably get my M lab account cancelled but I will put all the code on github use it as a reference use it as a starting point you know the point of this series

was not to build a shopping list the point of it was to show you how everything works together how you can build your own bigger and better applications and again I do have a 16

hour course where we go into more depth then we use you know we protect our back-end routes we use JWT for authentication so if you're interested more in the myrn stack check that course

so I'll put a link for just ten bucks in the description and that's it thanks for watching guys I appreciate it

In this video we will prepare our application for deployment to Heroku. We will create a heroku post build script so that we do not have to manually run “npm run build” for React. It will happen on the server once we push to it.

Code:
https://github.com/bradtraversy/mern_shopping_list

MERN Stack Front To Back Udemy Course:
https://www.udemy.com/mern-stack-front-to-back/?couponCode=TRAVERSYMEDIA

💖 Become a Patron: Show support & get perks!
http://www.patreon.com/traversymedia

Website & Udemy Courses
http://www.traversymedia.com

Follow Traversy Media:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia

The Developer Hangout: Public Discord Server
https://discord.gg/developers