Deploy Node.js website on Heroku for Free

What is going on everybody! My name is Raddy and you’re watching my channel Raddy The Brand! Today I want to show you how we can deploy a Node.js Application for free on Heroku! Now before we begin make sure you SMASH the like button, subscribe to my channel and comment below if you have any questions. It’s gonna be a quick one so let’s jump right on and start not coding but yeah let’s just jump on [Music] Before we begin make sure that you go to heroku.com and sign up for free and also obviously make sure that you have a working project. If you don’t have a working project I’m going to be using a project that we created a few weeks ago this is the news website that i use Node.

js Express and EJS 01:06 - with the WordPress Rest API to pull some data so i’m going to be using this project today feel free to follow along you can go in the description below find the link and just download it once you do that i’ve already done that obviously but once you do that make sure that you log into your hiraku account and go to the dashboard before we begin creating our project it’s probably worth testing our project and adding all the files that we need so let’s do that first of all i’m going to open this in visual studio code and as you can see in package.json we have a few dependencies that we need to install if you want to test it locally but if you already know that your project is working you don’t have to do this step so what i’m gonna do is install the dependencies super quickly just to test the project so npm installed and i’ve also noticed that i have node one is uh installed here so i’m going to and this is a development dependency so i’m going to have to do mpm install nodemon dash dash save dev and once we’re done with this hopefully if we go to app.js hopefully we should be able to run the app on port 5000 so let’s do npm start and all up should be reading on port 5000 now so if we go to the browser 5000 you should be able to see that our website is working well if you go to a page everything is coming from the yeah everything seems to be working well and we can actually continue so let’s close this and the first thing that we need to make sure that we do when we upload to heroku is to actually change the port so what we want to do is actually use the environment port of heroku and not set default one like i have in here so to do this we can do dot environment dot port or 5000 so hopefully the heraku will be running on the environment port now which is good and the next thing that we need to do is create a new file which will be called proc file and this file will basically tell raku which file to run just like we have in package dot json we have start app.js file which is running when we start our server so we want to tell heraku which file to run exactly the same way and to do this we can do web column node and then the file of a file which is app.js in my case app.js and save okay our project should be good to go and we can actually terminate this job and do yes all right okay we should be good to go with this project it’s working and we can push it to hiraku but before we do this we need to create a new application obviously so let’s do that on the dashboard and let’s give the application a name and i’m just going to call my something like node.

js news dash 04:42 - site okay this is perfect this is available and i’m going to choose region of europe and create app all right or application is now created but we need to follow a few simple steps before we uh push this before we push the files to haraku and first of all make sure that you have the heroku cli installed and if you go to this link here you will see that they have a simple installation guide so if your mac os just follow this if you’re windows you can install the install download the exe file and it’s still there and for ubuntu you can just follow the command in here to install it and so on so make sure you install this and then once you’re done go back and we should be ready to follow the next step and the next step is actually to create a new git repository so to do this it’s very important that you cd to your project i’m actually already cd to my project because i’ve opened the terminal uh the inside terminal in visual studio code as you can see so i’m already in my project folder but yeah but just make sure that you do that because it’s important let’s move visual studio to the right and the instructions to the left so we can follow them and okay so the first thing that we need to do is initialize git repository to do this we can do git init press enter and this has initialized empty git repository in our project now that we’ve initialized our project we actually need to follow the second command here which is raku git columns remote dash a and then the name of the website so i’m going to copy this and paste to save us some time now that we have this setup we can actually uh commit any changes that we have and push or files to hire to do this we can do git add dot and this will add all the files and if you want to commit files we have to do git commit dash im and then we usually need to when we commit changes to a project we need to usually give it a description but i’m just going to copy the one that they have in the example so make it better and then we close the quote and then we press enter so all the changes are now added committed and now we can push our project to heroku by doing git push heroku master press enter and this should take a couple of seconds to upload depending obviously on the size of your project i do have quite a few files so let’s see what happens once we’re done we should be able to see the build succeeded which is good uh this should actually give us the url which you can copy and paste in the browser or you can simply go to the heraku website go at the top here and just press open up and hopefully you should be able to see that your project is now working perfectly fine as you can see we are now on the note js nice dash website dot heroku app.com which is publicly available domain name so you should be able to access this now and check it out that’s pretty much uh everything from this tutorial i hope that you found it useful and if you did make sure that you smash the like button comment below if you have any questions and don’t forget to subscribe to my channel and i will see you in the next one thank you very much for watching .