Deploy NestJS typescript app to Heroku (Solved: 503 Error)

#node #nestjs #heroku #typescript

Deploying applications on Heroku is pretty straightforward in most cases. But I ran into a problem while deploying my NestJS application that included TypeScript.

The build succeeded but I kept running into 503 service unavailable error.

It took me a while to figure out the problem. Turns out we need some of the devDependencies in package.json for the app to run properly since we are performing the TypeScript build on the server.

To future me, here are the steps to deploy NestJS app, which includes TypeScript, to Heroku:

Sign up at Heroku or login if you already have an account set up.
Create a new app.
Then you'll be redirected to a page where you have options to choose deployment methods. Clear instructions are provided in all of the available options.

I picked Github for convenience.
In your NestJs project folder, add an optional dynamic port since our web server will be assigned a dynamic port by Heroku and we cannot statically define the port through which our application will listen.

await app.listen(process.env.PORT || 3000);
If you use nest-cli to create your NestJS application, the package.json includes the following command that runs our app in production mode. And if not, add it manually:

"start:prod": "node dist/main.js"

Now, create a file called Procfile, without any file extension at the root of your project. Heroku uses the procfile to know the commands to start our application. Add the following in the file:

web: npm run start:prod

or

web: yarn start:prod
Now for the important step that I messed up. Heroku sets the NODE_ENV to production and NPM_CONFIG_PRODUCTION flag to true by default and installs production dependencies only.

To install devDependencies, set config vars NPM_CONFIG_PRODUCTION to false.

You can add/edit config vars using Heroku dashboard. The option is available under the app's settings tab.

Or as an alternative, heroku-cli can be used.

heroku config:set NPM_CONFIG_PRODUCTION=false

Edit: Not all devDependencies (like prettier, eslint) are required so it's preferable to move necessary dependencies for production from devDependencies to dependencies
Make sure to add the following in .gitignore file to exclude them from deploying to Heroku

/dist /node_modules
Commit and push your changes to the remote repository. And, deploy your changes via any of the available integrations.

Either by using Heroku cli
git push heroku <branch_name>

Or using the Github deployment method from the Heroku dashboard

Top comments (17)

Lazaro O'Farrill • Apr 17 '22 • Edited

Great article, just wanted to point out that step 6 is not correct. That is what you would do if you didn't go through step 5. If you setup the Procfile to run start:prod you don't need development dependencies.

Rosy Shrestha • May 14 '22

Thanks for the feedback !

Sebastian Weiß • Dec 28 '21

Thanks a log :)

I am using it with fastify and I was required to add process.env.HOST to the listen too. Something like

const port = process.env.PORT ?? 3000;
const host = process.env.HOST || '0.0.0.0';

.....
await app.listen(port, host);

Emiliano Peralta • Apr 19 '22

Thanks!

Md Saeed Sharman • Jan 15 '22

I did not change the NPM_CONFIG_PRODUCTION flag but added required depenencies and was able to deploy successfully.

"dependencies": {
"@nestjs/cli": "^8.0.0",
"@nestjs/axios": "0.0.3",
"@nestjs/common": "^8.0.0",
"@nestjs/core": "^8.0.0",
"@nestjs/platform-express": "^8.0.0",
"@types/cache-manager": "^3.4.2",
"@types/express": "^4.17.13",
"@types/node": "^16.0.0",
"cache-manager": "^3.6.0",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^7.2.0"
},

Nils Jansen • Apr 8 '21

Great post! I was looking for a solution to this for way too long. Most tutorials say "just include /dist in the git repository" which really messes things up when trying to merge branches etc. :D