NodeJS + Express deployment on Heroku

In this quick blog post, we will see how to host HTTP Service in NodeJS with help of Express framework which is a widely used web framework in Node ecosystem onto a Platform-as-a-Service(PaaS) provider Heroku.

Pre-requisites

⦁ NodeJS with Express running locally. (We will set up a quick one in this blog post) ⦁ Heroku Account. (It's free to host to start with!) ⦁ Heroku CLI installed (One-time setup)

NodeJS with Express Local Development

We initialize NodeJS with default values with the below command

npm init -y

We will install express into our application using the below command, it will pull in the latest stable version.

npm install express --save

We will create server.js with below contents

const express = require('express');
const app = express();

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

app.get('/', (req, res) => {
    res.send('Service is UP on heroku.');
});

app.listen(port, () => console.log(`Express Server starting on ${port}!`))

Code is pretty straightforward, we have declared Express instance and set up one root("\") level Route. And then listening on a port if passed via Environment variable else one we defined.

Heroku Application Setup

Create new app

Give the application a meaningful name, region selection up to your need and Click Create app

Now we need Procfile which is the critical file in the Heroku ecosystem during application deployment.

Heroku apps include a Procfile that specifies the commands that are executed by the app on startup. You can use a Procfile to declare a variety of process types such as web, background, scheduler, etc.

Our Procfile will be as below, this will call the start script defined in our package.json

web: npm start

If no Procfile is defined, it will fall back to the start script defined in package.json, however having Procfile gives advantages in the long term to scale nodes, define environment variables, etc as part of the startup process.

update package.json

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js"
  },
  "keywords": [],
  "author": "Virendra Oswal",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "engines": {
    "node": "14.x"
  }
}

We can see, we added engines to match our local Node version, which in my case is 14.15.4 so runtime on Heroku and local development matches to avoid any issues.

Heroku Deployment

On creation it will directly take to the Deploy tab of your newly created application, specifying steps to push your code to Heroku as below, we will follow all steps as mentioned below

First, authenticate CLI with your Heroku account. It will open the browser, enter credentials

heroku login

Once authenticated, initialize git if not. If existing just add one more remote URL

git init // only if not git initialized
heroku git:remote -a nodejs-heroku-blog

Run below commands in as sequence mentioned to trigger deployment which will be done on git push

git add .
git commit -am "make it better"
git push heroku master

On the last command of push, it will show logs on local CLI as well as printing a lot of useful information as below like what is Node Version required, Process Type of application and at the end showing URL of the application you can use to consume your HTTP APIs.

You can also find the URL, using the below steps Go to Heroku Dashboard --> Select Your Application --> Click on "Open app" as below

Voila! Node application with Express is successfully deployed on Heroku.

Bonus

You can restart your Dynos which are a single entity of your Node Process, View logs via More tab on your application.

It will also show the latest activity on your application, like build status along with its log, who caused activity, etc on the dashboard page of the application. We can enable the maintenance mode of our application, if we are doing some activity, by going under Settings and enabling Maintainance Mode as below

Now if we open our application, it will give a good pre-defined Maintainance message :)

Resouces

• Full Source Code used in Blog
• Procfile Docs

Thank you for reading, If you have reached it so far, please like the article, It will encourage me to write more such articles. Do share your valuable suggestions, I appreciate your honest feedback and suggestions!

I would love to connect with you at Twitter | LinkedIn.