DEV Community

Željko Šević
Željko Šević

Posted on • Originally published at sevic.dev on

Deploying Node.js apps to Heroku

#node #heroku #githubactions #hosting

This post covers the main notes from setting up the Heroku CLI tool to CI/CD pipeline with Github actions.

Prerequisites

  • Run the following command to install the CLI tool 
curl https://cli-assets.heroku.com/install.sh | sh
Enter fullscreen mode Exit fullscreen mode
  • Create an account or log in if you already have an account 
heroku login
Enter fullscreen mode Exit fullscreen mode

Node server

  • Run the following commands for packages setup 
npm init -y
npm i express
Enter fullscreen mode Exit fullscreen mode
  • Write basic server 
// server.js
const express = require('express');
const app = express();
const PORT = process.env.PORT || 8080;

app.get('/', (_, res) => res.send('Hello world'));

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
Enter fullscreen mode Exit fullscreen mode
  • Configure start script 
// package.json
{
  "scripts": {
    "start": "node server.js"
  }
}
Enter fullscreen mode Exit fullscreen mode

Project setup

The following command will create a project with the provided name. Project URL will be <PROJECT_NAME>.herokuapp.com

heroku create -a <PROJECT_NAME>
git init
heroku git:remote -a <PROJECT_NAME>
Enter fullscreen mode Exit fullscreen mode

Create a Procfile with a command for starting the server.

# Procfile
web: npm start
Enter fullscreen mode Exit fullscreen mode

Environment variables

The following commands can be used to set the provided environment variable and restart the server, show the list of already set variables, remove the provided variable and restart the server, and append the set variables to a local file (.env in this case). Heroku will set up the server port's environment variable (PORT).

heroku config:set VARIABLE_NAME=value
heroku config
heroku config:remove VARIABLE_NAME
heroku config -s >> .env
Enter fullscreen mode Exit fullscreen mode

Addons

The following commands add and remove specified add-ons.

heroku addons:create <ADDON_NAME>
heroku addons:remove <ADDON_NAME>
Enter fullscreen mode Exit fullscreen mode

Databases

Redis

Run the following commands to provision the Redis database. Heroku will set the environment variables for the database connection.

heroku addons:create upstash-redis:free
Enter fullscreen mode Exit fullscreen mode

Postgres

Run the following command to bootstrap a Postgres database.

heroku addons:create heroku-postgresql
Enter fullscreen mode Exit fullscreen mode

The previous command will set the database connection string in DATABASE_URL environment variable.

Check the database info with the following command.

heroku pg:info
Enter fullscreen mode Exit fullscreen mode

Release command in Procfile can run migrations.

# Procfile
release: npm run migrate
Enter fullscreen mode Exit fullscreen mode

The following commands create the database backups, check the progress of the last backup, and show the list of the previous backups.

heroku pg:backups:capture
heroku pg:backups:info
heroku pg:backups
Enter fullscreen mode Exit fullscreen mode

Debugging

  • Get the real-time logs 
heroku logs --tail
Enter fullscreen mode Exit fullscreen mode
  • Get the specific number of lines of logs 
heroku logs -n 20
Enter fullscreen mode Exit fullscreen mode
  • Get the info about the app 
heroku info
Enter fullscreen mode Exit fullscreen mode
  • Get the state of the project to check if there are any issues 
heroku status
Enter fullscreen mode Exit fullscreen mode
  • Run bash on the app dyno 
heroku run bash
Enter fullscreen mode Exit fullscreen mode
  • Restart the app dynos 
heroku restart
Enter fullscreen mode Exit fullscreen mode

Deployment

Manual deployment

Deploy and open the deployed version with the following commands.

git add .
git commit -m "Initial commit"
git push origin master
heroku open
Enter fullscreen mode Exit fullscreen mode

If the command for opening the project in the browser doesn't work in Windows Subsystem for Linux, set BROWSER environment in the corresponding shell configuration file (e.g., ~/.zshrc)

export BROWSER=wslview
Enter fullscreen mode Exit fullscreen mode

CI/CD pipeline

Connect the app with Github on Deploy → Deployment method page and enable CI and automatic deploys.

Add .github/workflows/config.yml file with the following configuration for the CI pipeline.

name: CI pipeline

on:
  push:
    branches:
      - master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    container: node:20.9.0-alpine3.17

    steps:
      - name: Github checkout
        uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 20

      - run: npm ci

      - run: npm run lint

      - run: npm test

      - run: npm audit
Enter fullscreen mode Exit fullscreen mode

Boilerplate

Here is the link to the boilerplate I use for the development.

Top comments (2)

Collapse
 
reacthunter0324 profile image
React Hunter •

thank you

Collapse
 
zsevic profile image
Željko Šević •

You're welcome, and I'm glad you find this to be a helpful article.

Read next

rdhar profile image

Enhance Terraform/Tofu Automation with GitHub Action

Rishav Dhar -

akintolastephen profile image

Session Management In Node JS

AKINTOLA STEPHEN IYANU -

h3h profile image

Copy Config Vars from One Heroku App to Another

Bradford Fults -

anticoder03 profile image

How to Connect a React App with MongoDB: A Complete Guide

Ashish prajapati -