Deploy NestJS on Heroku in 5 simple steps

Photo Credit: rosyshrestha

Hello folks 👨‍👨‍👦‍👦, today I’m gonna guide you step-by-step, “how to host 🚀 your NestJs typescript backend server on Heroku”.

Reason of writing this article is, when I tried to host my NestJs app on heroku, I ran into a problem of Application Error 😟 even build was successful 🙎‍♂️

Then I started scratching the surface & did bit of Googling to find the answer. But most of the articles didn’t cover the solution for this problem, Later I get to know what exactly the problem is, which was related to typescript, “since I was building TypeScript on the server”,🤦‍♂ ️which was leading me to the application error.

After knowing the exact problem, I figured out solution to overcome this, which I am gonna tell you in a bit.

TL;DR. Before jumping to the steps, I would like to mention some prerequisites for this article.

Prerequisites

1. GitHub Account
2. Heroku Account
3. NodeJs Installed
4. NPM Installed

Now we are good to go …. 👨‍💻

Step 1: Install NestJs Application 🐈

You can either install a fresh nest js application on your local machine, or you can have any other working nestjs application.

As this article is not about the installing & setting up nest js application on your local machine, so I will recommend you to do it from Official Docs 📓 of NestJs.

After installing the NestJs project, go inside the project directory from your command line.

$ cd <path-to-your-nest-js-app>/<project-folder>/

And firstly create a new file inside your project root directory, by running the following command.

/<project-folder>$ touch Procfile

Or you can create it manually from your favourite text editor. And paste the following code inside your Procfile

web: npm run start:prod

💡 Note: make sure there is no extension for procfile file. For example: procfile.js, procfile.ts and procfile.txt, all are unacceptable.

Step 2: Update your package.json 🏗

Firstly, you need to specify your Node,js version in your package json file, inside the engines: {} property. As, heroku needs to know the version of Node.js, to be able to run your project on server.

If you are not sure about your node version, you can simply run the following command on your terminal, which will return you current installed version of Node.

$ node -v

You will get the output like this: “v14.10.1” (Your version number might be different)

Now, copy the version number, open your nest js project package.json file. On the root level of your package json object, paste the following code.

"engines": {
  "node": "14.10.1"
},

Step 3: Set the correct port (change in main.ts) 🤖

All you need to do is simply replace this line,

await app.listen(3000);

with the following one, in main.ts file:

await app.listen(process.env.PORT || 8080);

Your local server can listen to any port but Heroku needs to listen to a specific port that is set in the PORT environment variable. To do above changes you also need to install @nestjs/config into your project. You can follow the installation steps from NestJs Offficial Docs 📓.

Step 4: Update Node Config on Heroku 👨‍🔧

Before updating any config, you need to create a project on heroku. 😛

You can create a new project directly on heroku website. After creating a project you have to login from your project terminal & push your NestJs code on heroku. To do so, simply run the following commands:

$ heroku login
$ git init
$ heroku git:remote -a <heroku-app-name>
$ git add .
$ git commit -m "Deploying on heroku"
$ git push heroku master

Now, To setup your environment variables on Heroku server you can choose either command line process or you can directly login to your heroku dashboard and under the settings tab you will find Config Vars section, there you can add all your configuration variables & their respective values.

To setup the config variables from command line, simply open your terminal & navigate to your project directory. Then run the following commands.

$ heroku config:set PORT=8080
$ heroku config:set NODE_ENV=production
$ heroku config:set NPM_CONFIG_PRODUCTION=false

Step 5: Final Wrap Up 🚢

At last, just make sure all your changes are committed & pushed to Heroku. Also you can run the following command from your project terminal to restart your server once to be sure all new changes are updated.

$ heroku restart -a app_name

After all this above exercise, I hope your nestJs app will work smoothly on heroku server. Hosting on heroku is really straightforward but sometimes we need to trick the heroku to make it work with current tech stack. 😎