How to host Angular app on Heroku

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>'));

app.get('/*', (req,res,next) => {
    res.sendFile(path.join(__dirname + '/dist/dictionary/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 :)

Comments

[umbe1987]

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]

You can make it like this too:

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

[Shaquil Maria]

Thanks for this post!