Configure new Angular projects for Heroku deployments.
npm install --save-dev hangular
or
npm install -g hangular
ng new my-cool-app
cd my-cool-app
npm install --save-dev hangular
hangular
ng new my-cool-app
cd my-cool-app
hangular
Hangular is designed to be used with newly-created Angular apps.
While it may work on existing projects, we suggest using the section below to make the necessary modifications manually to prevent any complications. Don't worry, though, it's really easy!
Hangular updates package.json in three ways.
The following devDependncies are all moved:
"@angular/cli": "..."
"@nagular/compiler-cli": "..."
"@angular/typescript": "..."
The start script is updated.
"start": "node server.js"
A new "heroku-postbuild"
script is added.
"heroku-postbuild": "ng build --prod"
We tell Heroku what version of node and npm to use by adding an "engines"
field. Hangular grabs the version numbers from your current operating system.
"engines": {
"node": "...",
"npm": "..."
}
In order to serve the Angular application on Heroku, we need a fast, lightweight web-server. Server.js sets up a minimal Express server sending all requests to index.html, the entry point of our Angular application.
npm install express
and
const express = require('express');
const path = require('path');
const app = express();
const appName = require('./package.json').name
app.use(express.static(__dirname + '/dist/' + appName));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname + '/dist/' + appName + '/index.html'));
});
app.listen(process.env.PORT || 8080);
We tell Heroku what type of app we're serving and how to start it through the Procfile.
web: npm start