How to Deploy A FullStack React App to HEROKU | EASY!!!!

in a previous video I showed you in clear and proper detail how to deploy a full stack react application to AWS or Amazon's ec2 server we managed to successfully deploy our chat application if we even managed to purchase a custom domain and point it to the server now deploying with the ec2 server is a good and proper way to deploy applications but it's not the easiest you have to skip through a couple of Hoops before seeing your application live and if you don't watch it or if you don't do proper accounting you might end up spending a lot in your deployment using the ec2 server now a good alternative to AWS is Heroku Heroku is a cloud as a service platform which supports multiple languages hiroku is so much simpler and easier to use compared to other Cloud as a service platform including AWS the Heroku platform provides a set of capabilities that deliver high order value with Heroku there's no need to learn about server configuration Network management or tuning the latest version of a database Heroku removes all these obstacles so that developers can focus on what they do best which is creating great applications in today's video I'm going to show you how to deploy a simple full stack application to the Heroku platform before we carry on with our video please subscribe to my channel of late we've been going hard creating videos which will for sure improve your developer experience you don't want to miss out on what we have in store for you so make sure that you subscribe like this video and leave a comment below if you have any comment did you subscribe did you like the video alright then let's continue now for this tutorial we're going to be using that same application that we built that same chat application and I have to say many of you have been going wild on the chat application in like chatting to yourselves or chatting to other people and I'm glad to see that so yeah we're going to be using this application um if you're not familiar with this application we did create a chat application in one of my previous videos so make sure that you check that out I'm going to leave it in my cards so that you can like check it out so it's a simple chat application which I created using react and node.js as backend so I will show you this video in my cards so you can look at it if you're interested in that so before we proceed or we go anywhere the first thing that you need to do of course is to create a Heroku account so you need to just go to id.heroku.com or you can just go to heroku.com and just sign up and just follow the sign up information it's pretty easy to sign up and then once you're done signing up to Heroku just go to the Heroku um website once again and install the Heroku CLI especially for Windows users it's very simple to do so all you just need to do is to download the installer the 64-bit or 32-bit installer into your computer for Mac users all you need to do is just this command over here and then you'll be able to install your application so for other users I'm going to leave this link below so that you can know I mean for other OS or operating systems I'm going to leave this link below so that you can see how you can install the Heroku command line interface into your computer because this is very essential for what we're going to be doing next so it's as easy as that so that's all we need to do and now that we've put the groundwork out of the way let's continue with our video I'm going to go to my application and then once I've navigated to my application I'm going to just open it up using vs code and so as you can see this is the structure of our application from the onset we have two folders over here we have client and then we have the server right here now Heroku demands that we have a package.json file from on the root section so we're going to have to make this entire thing a note application and all we just need to do is just say npm and net dash dash yes all right and there's our package.json over there and what we need to do of course we we just need to navigate to this app.js file and actually uh start our MP well we need to just navigate to our app.js file and actually run it so that's what we're going to do we're just going to say CD server and node app.js just like that and then on the client side what you need to do let me just show you on the package.json you need to do this on your build section make sure that you include this line over here you say on on the build file I mean on the build section of your package.json just say react scripts build and CD into the server and install all the dependencies so this is the line that your hiroku CLI is going to run it's going to make sure that every dependencies is installed instead of saying start you're going to say start client this is what Heroku demands us to do instead of saying client make sure that you just do start client and the other thing that we need to do is that on our app.js yeah make sure you have this line from our previous video of course this line is already in there so this is the line that's going to run our static our react static files so that's very important for you to have but if you have been following our videos then you already familiar with this line of coding and the other important thing that you need to do is that you don't run hard code yourself you make sure you say process.env.port or 5001 so instead of having maybe five zero zero one here this uh your Heroku is going to complain so you need to put Port over here instead even if you don't have a process or even if you don't have an EnV file you actually need to declare this port that you have over here and then once you're done doing that let's just check if everything oh you forgot to actually navigate inside of our where did we make that start file I think we made the stud file over here that's not what we're supposed to do we were supposed to make that start file over here silly me I could have just copied and pasted that but I'll just pause the video and there we have it all right then after this I think we're ready for deployment now okay so let's just recap on what we just did we created an npm package.json over here so that we can just simply it allows us to actually it tells our hero quiz CLI what file is to be run so obviously we want to run this app.js file because it's the one that is going to be running our react static assets so this is the file that is responsible for running our entire application so when Heroku comes here it needs to identify the package.json and it also needs to identify it needs the route that tells us where to run our entire application the other thing that we actually need to do is that we actually need to take every single dependency that we have inside of our inner package.json in our server and we need to take those dependencies and we need to put them over here so Heroku demands that all those applications we put them over here and then yeah I think that's it we're ready for deployment now we just simply go to our command line and the first thing that you need to do is that after you've installed the Heroku CLI you need to say Heroku log in and Heroku is going to direct you to your browser it's going to say press any character and it's going to open up your browser it's going to ask you to log in like that you can just simply and you can just simply log in with your credentials okay that's done go back to your compiler and then that's it go back to your CLI now you can just simply say hiroku create and then you're going to name your file I'm going to call it coding 101 chat application yeah I'm going to just say chat app like that I'm gonna wait for it to create and you can see then if the name is not available it's going to give you an error so make sure that you give it a very unique name so you can see that I've given it this is where our application is going to run so application is going to be live on this URL that you're seeing over here and this is our Heroku chip repository then after we're done doing that we need to say jit add normal procedure let me say jet commit uh Heroku commit ment final thing that we need to do we just need to say push Heroku Master like this and what it's going to do is it's gonna build our application and it's going to deliver it to the Heroku website and it doesn't take much it takes about like two minutes or even one minute for it to if it's a small application like ours and then we can just use this URL that you see over here we can go to our browser just put this down fingers crossed there you have it there's our application let me type in a random name coder and there is our chat all right and so it is as simple as that just make sure that you um as you copy your dependencies everything is good because I noticed that one of the mistakes that I did is this dependency over here I didn't spell the word express properly and because of that I experienced an error so I guess I didn't need to actually install those dependencies so um on the outside on the root directory so I just needed to spell Express property so yeah that's it about installing I mean sorry that's it about deploying your application on Heroku yeah it's as simple as that it's not as difficult as or as complicated as the ec2 server but it's very sufficient it's very easy this is the type of thing that you would need to do for your simple applications if you don't want to do something too drastic but ec2 is very comprehensible it's very Co but ec2 is very comprehensive compared to Heroku in terms of server configurations monitoring how your server is performing all those types of things so yeah that's it for me for today's video I hope you've enjoyed if you have click the like button if you haven't subscribed to my Channel please do subscribe if you have subscribed make sure that you click the notification Bell icon so that you don't miss out on any of my content if you have any comments leave them below but other than that thank you so much for watching I will see you next time on coding 101

Channel: Koding 101

Views: 5,269

Keywords:

Id: 5_7uz6bErpY

Length: 12min 58sec (778 seconds)

Published: Mon Dec 12 2022