How To Deploy Your Website On Heroku For Free Using Github and Git!

Hello Readers,

I am back with my next article on How to deploy your website on Heroku for free using Github and Git! Every one of you might have created one or the other website applications using Nodejs and JavaScript basically but, have you tried deploying your website live for free? We can do it!

In today’s blog, we will be discussing more on Heroku and how to host our created website for free on Heroku.

What is Heroku?

Heroku is a cloud platform as a service (PaaS) supporting various programming languages. It supports languages such as Ruby, Nodejs, Python, PHP, Go, and much more! Heroku is said to be a polyglot platform as it has features for a developer to build, run and scale applications in a similar manner across most languages.

Installing Heroku CLI

For installing Heroku CLI on windows go through this Link.

For installing Heroku CLI on mac type the following command in the terminal:

$ brew tap heroku/brew && brew install heroku

For installing Heroku CLI on ubuntu type the following command in the terminal:

$ sudo snap install --classic heroku

This installation method is required for users on ARM and BSD. You must have node and npm installed already:

$ npm install -g heroku

You could check if Heroku has been installed correctly or not by typing the following command

$ heroku --version

Prerequisites

For hosting your website on Heroku, you have to first look into these steps to make sure you are ready to deploy your project to Heroku:

Make sure you have git installed in your system, check by running the command git --version. 
If you do not have git installed in your system, you can visit this website to install git Here.

1. For hosting any website on Heroku, you need to first push all your project code into Github, if you have no idea on how to push your code to Github help yourself Here.
2. Next, you should have Nodejs and npm installed
3. Also, you must have an existing Node.js app.
4. A free Heroku account.
5. The Heroku CLI.

Attention

Now, for hosting your website on Heroku you will need to check the JSON file of your project it should contain the following code:

In the above code, you could see that I have written a line

“scripts”: { “start”: “node app.js” },

which is very important to include if you want to host your website, and also, in your script file, you must include a line:

const port = process.env.PORT || 3000;

The above code is extremely important to be included because when you want to deploy your application to the cloud. The application server is started on a random port on the cloud. If you hard code a port number the specific port number may not be available. The application will never start. So it’s better to get the port number assigned by the cloud instance and start the HTTP server.

Methods to deploy your website on Heroku

There are basically two methods using which you could deploy your website on Heroku for free we will be discussing both the methods one by one:

1. Using Git and Heroku CLI: For hosting your website now, I would assume that you have pushed all your code to your Github account so now, you need to only type the command in your terminal step by step as given below:-
   Before you can deploy your app to Heroku, you need to initialize a local Git repository and commit your application code to it.

$ cd <name of your app directory>
$ git init
$ git add .
$ git commit -am "First commit"

Now, your app’s code is now tracked in a local Git repository. It has not yet been pushed to any remote servers.

Now, to create a Heroku Remote you will have to type the following command, for example

$ heroku create
Creating app... done, ⬢ pure-pearl-3455
https://pure-pearl-3455.herokuapp.com/ | https://git.heroku.com/pure-pearl-3455.git

Now, for deploying your app type this command in your terminal

$ git push heroku master

Congratulations !! You successfully deployed your static app on Heroku.

2. Using the Heroku website: For hosting your website now, I would assume that you have pushed all your code to your Github account so now, you need to only type the command in your terminal step by step as given below:-

First, sign in to your Heroku account.

Then, click New on the top right corner and select “Create new app”.

Give your app a name (This will be included in the public URL for your application) and click Create app.

This step will take you to the dashboard of your app. Open the Deploy tab and scroll to the “Deployment method” section.

Next, Select GitHub as the method.

It will show a “Connect to GitHub” option where we can provide our GitHub repository. If you are doing it for the first time, Heroku will ask permission to access your GitHub account, accept it.

Here, you can search for your GitHub repository and click connect

If it can find and connect to the GitHub repository, the Deployment section will show up where you can select if you want Automatic Deployment or Manual Deployment.

The advantage of automatic deployment is that, whenever you make changes in your Github repository the changes will automatically be pushed to your app website.

Next, click Deploy Branch at the bottom, your website is now hosted!!!

So, these were the two methods on how you can deploy your app using Heroku and Github, it’s really easy, go try it out!!

Keep learning and keep growing and also keep exploring more!

All the very best!

For more interesting and informative articles and tips follow me on Medium and Linkedin