How to deploy your Node App/API on Heroku
Tags: node, heroku, webdev
Published: 2020-11-16 19:25:30

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](https://expressjs.com/). 

### 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:
```javascript
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: 
```javascript
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``
```json
"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 <i>New</i> 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 <i>settings</i> tab of your Heroku app
2. Go to <i>Config Vars</i> and click <i>Reveal Config Vars</i>
3. Add the variables from the ``.env`` file as key-value pairs to the <i>Config Vars</i> 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 <i>Config Vars</i> 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.<br/> 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](https://devcenter.heroku.com/articles/logging)