Deploy Simple Node JS App on Heroku in Minutes

By Digamber Rawat Last updated on
In this tutorial, we are going to learn how to deploy a simple Node JS web app on Heroku using Heroku CLI. Deploying to Heroku a Node JS app is a pretty easy and straightforward job. We will create a simple app for the demo purpose. However, this basic Node app won’t have many functionalities. Our purpose is to understand the step by step process for deploying the node app on Heroku using Heroku CLI.

What is Heroku?

Heroku is a cloud platform that allows web developers and business to create, run and monitor web and mobile applications, specifically in the cloud. Heroku supports various programming languages, and it allows web developers to deploy, scale and manage the web applications.

We are going to take the help of Heroku Toolbelt to install the Heroku CLI on our local system. Heroku CLI allows us to perform the following tasks directly from our local machine:

  • Check Heroku logs
  • Create a Heroku app
  • Deploying to Heroku
  • Monitor Heroku status
  • Allow installing Heroku add-ons

Deploy Simple Node JS Web App To Heroku

Let us start creating a free account at Heroku cloud application platform, go to the official Heroku website to create an account.

Step 1: Install Heroku CLI using Heroku Toolbelt

We are all set to install and configure Heroku CLI, we are using MacOS for this tutorial. You can use Heroku Toolbelt to install Heroku CLI for MacOS, Windows & and Ubuntu.

Heroku Command Line Interface (CLI) allow us to manage the Heroku apps directly from the terminal shell.

$ sudo npm install -g heroku
$ password: xxxxxxxx

The following output will be displayed on your terminal when you are done setting up Heroku CLI:

πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯

  Thank you for testing (β©—) date-fns v2!

  In v2 we've introduced a number of breaking changes
  that make date-fns even more consistent and reliable.
  Please read the changelog carefully: https://git.io/fxCWb

  Please support us at Open Collective: https://opencollective.com/date-fns

πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯πŸ”₯

+ heroku@7.25.0
added 362 packages from 266 contributors in 88.617s

Enter the command in the terminal to verify the Heroku installation:

$ heroku --version

Step 2: Create Basic Node and Express JS Web App

Create a project folder using following command.

$ mkdir node-app-heroku

Head over to the project folder.

$ cd node-app-heroku

In the next step we are going to create the node app using the following command:

$ npm init

# Press ^C at any time to quit.
# package name: (app-heroku) node-app-heroku
# version: (1.0.0) 
# description: 
# entry point: (app.js) 
# test command: 
# git repository: 
# keywords: 
# author: Digamber
# license: (ISC) 
# About to write to /Users/digambersingh/Desktop/node-app-heroku/package.json:
# Is this OK? (yes) yes

Now, we will install express js to make the server settings for our Node app.

$ npm install express --save

Create the app.js file in the root directory of your project and include the given below code in the same file:

var express = require('express');
var app = express();
var path = require('path');

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, 'index.html'));
});

app.listen(process.env.PORT || 4000, function () {
    console.log('Node app is working!');
});

With the help of express js we have created the basic app, we have set the application port and root for the application.

In the next step, we will create the .env file in the root of our project and then add the following code in the .env file.

PORT = 8080

Then create the .gitignore file and include the given below code in the file. It will save pushing un-required code to the Heroku master.

/node_modules
npm-debug.log
/.env
.DS_Store

It’s time to create the index.html file, add the following code in the file:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Heroku Node App Deployment</title>
      <!-- description text that displays below the link in google search results -->
      <meta name="description" content="Description of site" />
      <style>
         header:after, nav:after, footer:after, .module-block:after, .gallery:after, .social:after{content:".";display:block;height:0;clear:both;visibility:hidden;} *{margin:0;padding:0;} body{font-size:16px;line-height:1.5;font-family:'Josefin Sans', sans-serif;color:#272727;background:rgb(247, 251, 252);background:-moz-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(247, 251, 252, 1)), color-stop(40%, rgba(217, 237, 242, 1)), color-stop(100%, rgba(173, 217, 228, 1)));background:-webkit-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);background:-o-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);background:-ms-linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);background:linear-gradient(top, rgba(247, 251, 252, 1) 0%, rgba(217, 237, 242, 1) 40%, rgba(173, 217, 228, 1) 100%);} header, footer, article, section, nav{display:block;} img{border-radius:100%;max-width:100%;display:block;} a{color:#D24655;text-decoration:none;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;} a:hover, a:focus{color:#000;} a img{border:none;} h1{font-size:50px;margin:0;color:#000;font-weight:normal;line-height:1;} h2{font-size:24px;letter-spacing:2px;text-transform:uppercase;font-weight:normal;margin:0 0 24px;line-height:1;} h3{font-size:30px;font-weight:normal;margin:0 0 24px;line-height:1;} p{font-family:'Vollkorn', serif;margin-bottom:24px;} header{margin:20px 40px 60px;} header div{margin-top:40px;width:60%;float:left;} header p{color:#272727;font-size:18px;margin:0;font-family:'Josefin Sans', sans-serif;} nav{float:right;width:40%;} nav ul{float:right;} nav li{float:left;list-style:none;padding:4px 0;} nav a{color:#565656;display:block;font-size:12px;margin:5px 2px;padding:10px 10px 8px;text-transform:uppercase;font-weight:bold;letter-spacing:1px;border-right:1px dashed rgba(0, 0, 0, .3);} nav li:last-child a{border-right:none;} nav a:hover, nav a:focus{text-decoration:none;background-color:#f0f0f0;border-color:transparent;} .up{margin-top:50px;} .up a{background:rgba(0, 0, 0, .25);font-size:30px;padding:12px 10px;border-radius:10px;text-shadow:1px 1px 2px #fff;} .up a:hover, .up a:focus{color:rgba(0, 0, 0, .45);text-decoration:none;} img.right{float:right;margin:0 0 20px 20px;} .social li{float:left;list-style:none;} .social a{display:block;font-size:12px;margin:5px 2px;padding:10px 10px 8px;text-transform:uppercase;font-weight:bold;letter-spacing:1px;border-right:1px dashed rgba(0, 0, 0, .1);} .social li:last-child a{border:none;} .post{position:relative;margin-bottom:50px;padding-left:24%;} .post h3{margin-bottom:10px;} .post img{width:20%;position:absolute;left:0;top:0;border-radius:0;} .date{display:block;margin-bottom:10px;} .gallery li{float:left;list-style:none;width:21%;margin:0 5.3333% 20px 0;} .gallery li:nth-child(4n){margin-right:0;} .gallery a{display:block;} .gallery a img{-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;} .gallery a:hover img, .gallery a:focus img{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1);} .page-wrap{max-width:960px;padding:0 20px;margin:0 auto;} .module-block{background-color:#fff;margin:0 0 70px 0;padding:40px;-webkit-box-shadow:inset 0px 0px 13px rgba(68, 68, 68, 0.1);-moz-box-shadow:inset 0px 0px 13px rgba(68, 68, 68, 0.1);box-shadow:inset 0px 0px 13px rgba(68, 68, 68, 0.1);border:1px solid rgba(0, 0, 0, .1);} .module-block h2{padding-bottom:30px;margin-bottom:30px;border-bottom:1px dashed rgba(0, 0, 0, .3);}
      </style>
   </head>
   <body>
      <section class="page-wrap">
         <header>
            <div>
               <h1>Deployed to Heroku</h1>
            </div>
         </header>
         <article id="block1" class="module-block">
            <img class="right" src="http://placehold.it/150"/>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu velit tempus, pulvinar velit eu, laoreet
               est. Nulla vel massa at mauris pellentesque imperdiet. Donec tempor egestas nisl nec faucibus. Ut congue
               semper nisl eget lobortis. Aliquam vulputate dolor mi, vitae gravida nunc porta sit amet. Nullam
               finibus, nisl quis suscipit lacinia, diam justo hendrerit nisl, accumsan sodales risus lacus non quam.
               Proin dignissim tempor arcu, et aliquam erat accumsan eget.
            </p>
            <ul class="social">
               <li><a href="https://www.positronx.io/free-angular-tutorials/">Angular Tutorials</a></li>
               <li><a href="https://www.positronx.io/">positronX.IO - Software Development Resources</a></li>
            </ul>
         </article>
      </section>
      <!-- page-wrap -->
   </body>
</html>

Step 2: Create Heroku Procfile

In this step, we are going to create Heroku Procfile, Heroku apps use the Procfile. This file holds the commands which are run by the Heroku app when the apps are starting up. You define your app’s process types in it.

Go to your app’s root and create a file by the name of Procfile and add the following code in it:

web: node app.js

Step 3: Add the Script in Package JSON

Go to pacakge.json file and the following script in it:

"scripts": {
    "start": "node app.js"
}

Step 4: Deploy Node App on Heroku Platform using Heroku CLI

In this final step, we are going to deploy Node app on Heroku. Login to Heroku using Heroku CLI from your terminal. It will ask for your Heroku email address and password:

$ heroku login -i

# heroku: Enter your login credentials
# Email [johndoe@yahoo.com]: 
# Password: ***************

# Logged in as johndoe@yahoo.com

Initialize your Node app to Git repo using the below command:

$ git init

# Reinitialized existing Git repository in /Users/johndoe/node-app-heroku/.git/

Enter the given below command to create the project on Heroku platform. Heroku CLI will generate the project for you with a random name. You can later on change this name by going to Heroku admin dashboard.

Heroku CLI generated shrouded-mountain-26368 app name for me.

$ heroku create

# Creating app... done, β¬’ shrouded-mountain-26368
# https://shrouded-mountain-26368.herokuapp.com/ | https://git.heroku.com/shrouded-mountain-26368.git

Initialize a git repository in a new or existing directory

$ heroku git:remote -a your-heroku-app-name

# set git remote heroku to https://git.heroku.com/shrouded-mountain-26368.git

Then, add and commit your Node and express js app:

$ git add .

$ git -am "make it great"

Deploying to Heroku

Finally, we are going to push Node and express js app to Heroku master. Run the command to push your Node and express js web app to Heroku. If everything goes fine then you’ll get the similar output in your terminal:

$ git push heroku master

# Enumerating objects: 4543, done.
# Counting objects: 100% (4543/4543), done.
# Delta compression using up to 4 threads
# Compressing objects: 100% (3525/3525), done.
# Writing objects: 100% (4543/4543), 3.92 MiB | 1.03 MiB/s, done.
# Total 4543 (delta 1396), reused 3533 (delta 812)

Now you have pushed your app to Heroku, in the next step go to Heroku admin dashboard and click on the β€œOpen app” button to open the app in the browser:

Or you can also enter the below command to open the Heroku app in the web browser:

heroku open

You can use the following command to check the logs of your Node js app in the terminal:

$ heroku logs --tail

Step 5: Check out Live Heroku Node JS App

You can find out the live demo of the Node JS app, this web application is being server from Heroku cloud platform.

View Heroku App Demo

Check can check locally your Node js web app using given below command on http://localhost:8080

$ heroku local web

You can checkout the GitHub repo by clicking on the given below button.

GitHub Repo

If this tutorial helped you then i would request you to save it with others. Thanks for reading, have a good day!

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.