 What is going on everybody? My name is Wadi and you're watching my channel Wadi 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. 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 today, I'm going to be using a project that we created a few weeks ago This is the new website that I use Node.js Express and EJS 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 Heroku 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 install and I've also noticed that I have Nodemon installed here So I'm going to and this is a development dependency. So I'm going to have to do NPM install Nodemon-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 our app should be running 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 aha in here. So to do this we can do dot environment dot port or 5000 so hopefully the Heroku 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 This file will basically tell Heroku which file to run just like we have in package.json. We have Start app.js file, which is running when we start our server So we want to tell Heroku which file to run exactly the same way and to do this we can do web column note and then the file of our app 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 drop and do All right. Okay, we should be good to go with this project. It's working and we can push it to Heroku 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 mine something like nodejs-news-appsite 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 Pushed it before we push the files to Heroku 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 Simple installation guide. So if you're macOS, just follow this if you're Windows you can install the install download the exe file and install it 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 a project because I've opened the terminal 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 Code to the right and Destructions 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 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 Heracu 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 and Now that we have this setup we can actually Commit any changes that we have and Push or files to Heracu 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 I am 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 Heracu by doing git push Heracu 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 are done, we should be able to see the build succeeded, which is good This should actually give us the URL which you can copy and paste in the browser or you can simply go to the Heracu 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-news-website.heracuapp.com Which is publicly available domain name. So you should be able to access this now and check it out That's pretty much 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