Add your Angular 6 app to Heroku

Here is a quick guide on how to add your Angular 6 application to Heroku.

This will require you to have Angular-cli and Heroku-cli

Build the App

ng build --prod --output-path ~/Desktop/project/public --watch
Navigate to newly created project folder not public
cd ~/Desktop/project/

Create Procfile

web: node index.js

Create package.json

{
    "name": "application",
    "version": "1.0.0",
    "description": "",
    "main": "inline.d8ef846a9a2a6e40ab76.bundle.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "dependencies": {
    "body-parser": "^1.18.2",
    "compression": "^1.7.1",
    "ejs": "^2.5.7",
    "express": "^4.16.2",
    "path": "^0.12.7"
}

Create index.js

var express = require('express');
var path = require('path');
var app = express();
const port = process.env.PORT || '5000';
app.set('port', port);
app.use(express.static(__dirname + '/public'));
app.get('/[^\.]+$', function (req, res) {
    res.set('Content-Type', 'text/html')
        .sendFile(path.join(__dirname, '/public/index.html'))
});
app.listen(app.get('port'), function () {
    console.log('Server running on port', app.get('port'))
});

Run in terminal

git init

Create .gitignore

node_modules/
package-lock.json
.idea/

Run in terminal

git add . && git commit -am "Initial Commit"

Build a new instance on Heroku, run in terminal

You will need to replace “mynewapplication” with a unique name

heroku create mynewapplication

Publish files to Heroku, run in terminal

git push heroku master

Sidebar Menu