Deploy An Express Node.js Application to Heroku Quickly and Easily
Tags: node, tutorial, webdev, beginners
Published: 2022-05-28 13:55:57

With Heroku, you can deploy your Express Node.js application to production in just a few steps. In this post, I'll show you a step-by-step guide to deploying your Express Node.js application to Heroku.

To quickly get started you can use my repo template [simeg/express-heroku-example](https://github.com/simeg/express-heroku-example).

## What is Heroku?

Heroku is a Platform as a Service (PaaS), and should not be confused with Service as a Service (SaaS). It offers a hobby plan where you can deploy your applications for free, with some limitations.

For all my hobby website projects I use Heroku. I've created things like [sudoku-js](https://github.com/simeg/sudoku-js) and [impossible-tic-tac-toe](https://github.com/simeg/impossible-tic-tac-toe). See the About sections for links to the applications.

## Preparation

First, install the Heroku CLI. If you're on macOS run

```
$ brew tap heroku/brew && brew install heroku
```

Otherwise, head over to [Heroku's website](https://devcenter.heroku.com/articles/heroku-cli#install-the-heroku-cli).

## Deploy Node.js Application to Heroku

Now that you have the CLI installed, we can start writing some code. We will use a minimal example with an HTTP Express server.

### Node.js Application

Bootstrap a Node.js application with `npm init`. Then add Express as a dependency with `npm i --save express`.

Now let's look at our slim Express server in `index.js`.

{% gist https://gist.github.com/simeg/52b1bf277d5fe447239b379ea41346d0 file=express_heroku_1.js %}

You can read more about [Express here](https://expressjs.com/).

This HTTP server is simple. It has one `GET` endpoint which returns the `200` and the text `Hello World!`.

Now that we have the server ready, we need some extra things to be able to deploy it to Heroku. First of all, we need a `Procfile`.

{% gist https://gist.github.com/simeg/5b0625a69e2f8427dd35cea94ad4fc88 file=Procfile %}

This is the file that Heroku reads when it starts the application. As you can see the file runs `npm start`, so we need to create that too. We add it to `package.json`.

{% gist https://gist.github.com/simeg/c50ff3dd100963b967dd22bc1c8c06b8 file=express_heroku_2.json %}

Also, notice the `engines` section. This is for Heroku to know what runtime to use to run your application. You can see what Node.js versions Heroku support on [this site](https://devcenter.heroku.com/articles/nodejs-support#node-js-runtimes).

### Deploy to Heroku

There are a few ways to deploy to Heroku. We will use git which is the easiest way.

Now that all the code is written we need to commit it.

```bash
$ git add .
$ git commit -m "Initial commit"
```

Then we need to create an application on Heroku.

```bash
$ heroku create
```

This command also adds a git remote called `heroku`. This remote is where we push to deploy our application. Let's do that now!

```bash
$ git push heroku main
```

At this point, Heroku will try to figure out what build pack to use. Essentially, what type of application are you deploying? Because we have a `package.json` file in our root, it knows it's a Node.js application.

When the command is done it will output a URL. Let's open it!

```bash
...
https://thawing-beyond-32509.herokuapp.com/ deployed to Heroku
...
```

And we can see `Hello World!` in the browser. Easy as pie!

Now you can check the logs for your application.

```bash
$ heroku logs --tail
```


## Conclusion

Now you know how to deploy a Node.js application to Heroku. Heroku provides great tooling to quickly get something up and running. But this is just the start! Express allows you to build complex web applications. And with Heroku, you can quickly deploy them to production.

Check out Heroku's [Best Practices for Node.js Development](https://devcenter.heroku.com/articles/node-best-practices) for tips and tricks. And their [page about Node.js](https://devcenter.heroku.com/categories/nodejs-support) is also useful.

---

_Connect with me on [Twitter](https://twitter.com/prplcode), [LinkedIn](https://linkedin.com/in/simeg), or [GitHub](https://github.com/simeg)_

_Originally published at [prplcode.dev](https://prplcode.dev)_