GraphQL With React & Apollo [4] - Simple Heroku Deploy

alright guys so now we're ready to deploy and this is gonna be a pretty simple deployment we're gonna use Heroku before we get into that though there's a few things we need to do so one thing is if we go into client and then we go into source and app dot j/s so when we created our apollo client here we're sending our request to localhost 5,000 / graphic UL now our development environment is different from production we're not going to have two separate servers and development we're not gonna have a local it was three thousand five thousand it's all gonna be one we're gonna do we're going to compile our react application into the public folder on the server and deploy that so this needs to be just slash graph QL okay so if I save that you know that's what we want but if we were to run our local stuff now it wouldn't work because it would look at localhost 3000 / graphic UL which isn't the thing five thousand is our server so to fix that we just go to our package Jason in our client okay make sure you're in your client your react out and then we just want to add a proxy okay so proxy and we want to set that to HTTP localhost 5000 ok so then it will automatically know to look at five thousand and then just restart your server if you're running it alright now that's one now we want to go into our server dot j s and do a couple things so one thing I'm going to do is bring in the path module which is just a core node.js module we don't have to install it or anything it's just to work with file paths and then down here underneath the slash graph QL route we want to set a static folder okay so to do that we can do app dot use and we can say Express dot static and we'll say that we want public to be our static folder and then we need to make it so that whenever any route except this slash graph KL is hit it's going to just redirect to reiax in deck HTML page which will be in the public folder okay I know you don't see a public folder here yet because we haven't built out our our react application but there will be so let's say apt-get and we want to put an asterisk in here and then let's say request response and what we want to do is say res dot send file okay we want to we're just loading a file here the index.html but we need to get to it so we're gonna use path dot resolve okay and in path dot resolve we're going to put double underscore dur names so from the current directory we want to go into public and then we want to run index dot HTML okay so that's what's gonna happen when we hit any row and make sure that this is below the graph QL row and that's it go ahead and save this okay make sure you have this for your port process and V port and then pass it in here make sure that's all correct and yeah we should be good so now if we look in client package dot Jason we have a build script right you guys probably used this before we do n PM run build and it creates a folder called build in our client folder that's not what we want we want it to go into our server into a folder called public and there's a lot of ways you could do this you could even create a post build script off on your server so that when you upload to Heroku it builds it there but we're not going to do that we're going to keep this simple so we're gonna add on to this and say we want to also move the build folder to up a level to public okay so it'll create a public folder in our server instead of a build folder on the client so we'll save that and let's CD into our client folder ok I make sure you're in client and let's do NPM run built as you can see it's gonna create it it's gonna move it to a public folder on our server and there it is so we have public alright good so now we're ready to deploy so you need to create an account at Heroku comm once you do login you'll see something like this and your apps will be laid out here when you have some and you also need to download the CLI so if we go to let's say Heroku CLI first link here I'll click that and then if you're on Mac you can use the Installer or homebrew windows you have your installers and then bun to some other methods just get that installed once you have it you'll be able to just do Heroku and you should see all the commands and stuff okay so first thing you want to do and make sure you're out of your client in your server okay so if you do an LS you should see server J s okay so from here we want to do Heroku login it's going to ask you for your credentials okay so once you're logged in you just want to run Heroku create and what it'll do is it'll create your app and it's gonna give you some weird-ass name like warm cliffs yours will be completely different but it should be dot Heroku app comm now if I go back to my interface mice my dashboard and reload I'm gonna see that so here it is warm cliffs so if I click on that I want to go to deploy and you want to grab this link right here you basically want to add this as your remote repository okay so that you can push to it so we'll grab that and let's go back and clear this up and paste that in okay so that gets added as a remote repository now we want to put we want to push to it but before you push to it make sure that everything is up-to-date okay you want to do get add all and do your git commit I will just do em and put your comment in here and you can put you know whatever you want we'll just say finished react I don't know it doesn't matter and commit everything okay so now everything is up-to-date if I do a git status everything is up-to-date so now we just want to let me clear this up first we want to do get push to Heroku to the master branch hopefully that goes okay should be quick because it's a very small application and Heroku is great it's it's really easy to to host no taps at her Oh codes it's it's easier than using something like digitalocean we have to setup you know something like nginx and deal with your ports and all that stuff okay so that was deployed so we can visit this URL you can even just do Heroku open and that will open your browser and there we go so we're now deployed so let's go to launch details okay so we know the react router is working and that's it there's not much to test it's a very small app but it is in fact deployed and if you wanted to add a domain to this you could go to settings go down to right here domains and say add domain put your domain in and then it'll give you instructions actually right here as the instructions to point your DNS to Heroku so you can just go through this if you wanted to add a domain all right but I'm not gonna obviously I'm not gonna do that and you have to add a credit card they won't charge you but you have to add a credit card to add a domain alright guys so I really hope you enjoyed this project I know we didn't touch on everything like we didn't touch on mutations and stuff but the idea is just to give you you know give you an idea of how everything is is put together as far as you know creating the server you know installing Apollo and creating your client your provider your queries all that stuff and displaying it alright so thanks for watching guys if you like the series please leave it a like and I will see you next time

Channel: Traversy Media

Views: 30,938

Keywords: react heroku, express heroku, heroku, node heroku, heroku deployment, react graphql

Id: ok6bu-3XRA8

Length: 9min 14sec (554 seconds)

Published: Mon Nov 12 2018