How to deploy your Node App/API on Heroku

Deploying a website/web app is easy in these modern times with deploying services such as Firebase, Netlify,...
But to deploy Node apps or apps that have some sort of communication with backend-services or database, we have to look further than one of the static deployment services.
To deploy an app like this, we need to look at services like Heroku, Back4App, or Google App Engine.
In this example, Heroku will be used for deployment.

This guide can be used for Node.js web apps, but also for Node API's using .env variables. This API is built with Express.

1. Make your API production-ready

Port listeners

When building your app, a port was set to where the app should listen too. (Mostly in the root file like index.js/app.js)
For example:

app.listen(3000, () => {
  console.log(`App listening on http://localhost:3000`);
});

If there is still a hardcoded port number in use as a listener for the app, this needs to be changed.
To be able to run the app on the Heroku servers, the port needs to change to an environment variable but can be used in combination with the hardcoded value.
For example:

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.warn(`App listening on http://localhost:${PORT}`);
});

After adjusting your code, the application will run locally on port 3000 but will use the environment variable on the Heroku servers.

Package.json

In the package.json, create a command that will start your app on the Heroku server
For example npm start

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon ./index.js",
    "start": "node index.js"
  },

In this example, npm start can be used to run the app on the Heroku server, or locally in production mode, and the dev can be used to run the app in development using nodemon.
We will use the command to start the app in production in the Procfile

Procfile

A Procfile is a Heroku file that defines the dynos settings for your project. The content of your Procfile will define how Heroku will start your Node app.

1. Create a Procfile in the root of your project
2. Add the content web: to the newly created Procfile let it be followed by your command to run the node app in production. In this case, the Procfile will look as following

web:npm start

You can also call node index.js directly if you want.

2. Create a new project on Heroku

When logged in to the Heroku platform, you can create a new Heroku-app in the dashboard by clicking the New button.
After giving it a name and choosing a region, we can now link our codebase to our Heroku app.

3. Link your repository to Heroku

You can link your codebase in several ways to your Heroku app:

• Using the Heroku CLI in combination with Git
• Using the Heroku CLI in combination with Docker
• Using Github to connect your repository directly to the app

Since the API codebase in this example was hosted on Github, we opt to connect the repository directly to the app.
This means every time a commit is done to the master/main branch of the repository, the Heroku app will rebuild and re-deploy.

4. Add environment variables to Heroku

If you are using a .env file in your Node App or API to store environment variables or to keep credentials to API's or others hidden, you will have to add the env variables stored in your .env file manually to the Heroku app.
These can be done with Heroku CLI, or within the GUI of your Heroku app

1. Go to the settings tab of your Heroku app
2. Go to Config Vars and click Reveal Config Vars
3. Add the variables from the .env file as key-value pairs to the Config Vars of your app

Heroku cannot read nor process .env files, so it will not be able to access your environment variables necessary for the deploying app.
If you are using an .env file and you are not adding the Config Vars to your app, your app will not work.

5. All set, API should be up and running

After following every step in this guide, the API should now be up and running on the Heroku servers.
In the case of an API, it can be useful to add some documentation or a landing page when a simple GET request is done to the root URL. This will give visual confirmation the API is up.

6. Deployment success, the app is not working

If the deployment of your app was successful, but your app is not working correctly, you can see the logs of the deployed app making use of the Heroku CLI or the GUI of your app.
Heroku Logging Docs