Deploy your Node.js App on Heroku using GitHub

Kunal Rohitas — Mon, 25 Apr 2022 04:22:11 +0000

In this tutorial, we will go over the process of deploying a Node.js application on Heroku for free. Deploying an application can be a tedious task but if we follow the steps properly then it's a cakewalk.

When I was deploying my first app I had to browse many articles in order to know the complete steps, to save your time here I've listed step-by-step procedures to deploy your app.

To get started you will require a heroku account that you can easily create

Here I’ve taken a simple demo project to demonstrate the deployment.

This is how our Node.js project looks like, it only contains an index.html file that will be rendered on the homepage of the website.

1. Initialize a git repository in the project

To initialize a git repository, open a terminal in your project directory and run the following command.

or if your project already has a git repo then you can skip this part :)

git init

2. Configure your app using Environment Variables

Environment variables allow us to configure our application without re-building it. It externalizes the environment-specific aspects of the application.

Environment variables are helpful to configure parameters such as

The port on which your application is running.
If your project uses an API or any other thing that contains sensitive information.

First, you need to install the ‘dotenv’ package which can be done in your terminal

npm install dotenv

you need to add to your index.js file

require('dotenv).config();

Now, create a .env file in your project directory and add the parameters that you want to configure externally.

similarly, you can add other parameters.

To use these variables in your app you can access them using

“process.env.” in your index file.

In the above example, I've added the port using the syntax I've stated above.

IMPORTANT!
Do not forget to add your .env file to .gitignore because if you don't do that when you push your project to GitHub your API keys and sensitive data will be exposed. Also add node_modules folder to .gitignore.

After following the above steps your .gitignore file should have at least .env and node_modules in it.

3. Create a Procfile

A Procfile is a file that specifies the commands that are executed by the app on startup.

Create a file named Procfile into your project directory and add the below command to it.

web: node index.js

after making the changes to the project it is a good time to commit your changes, to push your repo to GitHub you can follow this article.

4. Download Heroku CLI and Sign In

The Heroku CLI

Download and install the CLI from the above link.

Log in into the CLI by running the command and it will take you to Heroku login page and you can fill your credentials there.

heroku login

Create a new app on Heroku

Create a new app and it will prompt you to enter the name of the app.

If your application uses an API key and you have added it in .env file then:

Go to the settings
In config vars section add the API keys or your secret keys in the key-value input.

Note: the inputs in key, values should match with the names of the variables you have given in .env file

6. Connecting your GitHub Repository with Heroku and deploying your application

Well, that was quite a lot of work ;)

Now in your application dashboard in the deploy section, select the deployment method as GitHub.

After your repository is connected just scroll down and deploy your app and after a minute or two of processing it will ask you to visit your application that has been deployed.

In our case this is how it looks xD.

Congratulations you have successfully deployed your Node.js application, now you can flex your projects in front of the world :)

If you liked this tutorial, please feel free to leave a comment below. Open to feedback.

You can connect with me on Twitter, GitHub, LinkedIn, I would love to answer any question that you have!