How to host Angular app on Heroku

#angular #heroku #node #javascript

We need an express server to make the Angular app live.

Install express and path.

npm install express path

Create server.js

const express = require('express');
const path = require('path');

const app = express();

app.use(express.static(__dirname + '/dist/<FOLDER_NAME>'));

// Link index.html of build folder with router.
app.get('/*', (req,res,next) => {
    res.sendFile(path.join(__dirname + '/dist/<FOLDER_NAME>/index.html'));
});


app.listen(process.env.PORT || 8000);

Add these lines in `package.json`

inside scripts

"start": "node server.js",
"heroku-postbuild": "ng build --prod"

Add engines inside package.json

"engines": {
    "node": "14.15.3",
    "npm": "6.14.9"
  },

Add this project to GitHub and connect this repository with your Heroku app.

Click on deploy.

Thanks for reading :)

Top comments (5)

umbe1987 • May 6 '21

Great, thanks! Just one small correction if I may: "res.sendFile(path.join(dirname + '/dist/dictionary/index.html'));" should probably be changed to something like "res.sendFile(path.join(dirname + '/dist//index.html'));".

Shaquil Maria • May 11 '21

You can make it like this too:

app.get('/*', function (req, res) {
    res.sendFile('index.html', { root: 'dist/<project-name>/' }
    );
});

RishabhSharma333 • May 19 '21 • Edited

I was able to deploy my angular app following this post.I would like to further clerify.here Folder_Name is name of folder in your dist folder (this folder will be created while you build locally).While writing engines write the versions of node and npm installed locally on your system.(find it using node --version and npm --version).