As I had difficulty finding a reliable source online, I decided to create my own.
Here is how you deploy an Angular 6 app to Heroku
Step 1
You are going to need something to serve your files. Let’s go with express. We will also need ‘path’ to setup our server (unless you wanna hardcode those in yourself)
npm install --save express path
Step 2.
Now if we want Heroku to build our project on their servers we need to tell them two things.
1. How to build our project and
2. What versions of node/npm our code works with
You can do this by putting the following in package.json
"scripts": {
...
"postinstall": "ng build --prod"
},
"engines": {
"node": "8.11.3",
"npm": "6.1.0"
},
Remember to replace the versions of node and npm to the ones you have.
You can find out with
node --version
npm --version
Step 3
By default angular separates away from deployments what it thinks are ‘development’ only additions. However, since Heroku is building our code, we need to give it the ability to run those modules.
To do this you can either move @angular/cli, @angular/compiler-cli, typescript and "@angular-devkit/build-angular": "~0.6.8"__*__ from our devDependencies over to dependencies. Or we can have Heroku install those modules on their own.
I personally prefer the first as it allows you to specify versions, however if you wish to do the latter, you would place the following right under postinstall
"preinstall": "npm install -g @angular/cli @angular/compiler-cli typescript",
Step 4
Create our server file. In your main application directory (the one with package.json) create a file called server.js. Add the following
const path = require('path');
const express = require('express');
const app = express();
// Serve static files
app.use(express.static(__dirname + '/dist/MY_APP_NAME'));
// Send all requests to index.html
app.get('/*', function(req, res) {
res.sendFile(path.join(__dirname + '/dist/MY_APP_NAME/index.html'));
});
// default Heroku port
app.listen(process.env.PORT || 5000);
Remember to replace MY_APP_NAME (both of them) to the name of your app.
Step 5
Now to create a Procfile to tell Heroku “how” we wish our app to be run. In your project directory (same one with package.json) create a file called Procfile and place the following
web: node server.js
Step 6. Final Step
We can now build our app with npm install and run it with ‘node server.js’.
If everything works, we should now see a working site on http://localhost:5000
If you have any issues feel free to leave a message in the comments.
To push to heroku, assuming you have the cli installed.
If not (https://devcenter.heroku.com/articles/heroku-cli#download-and-install)
heroku create
git add .
git commit -m "initial heroku deploy'
git push heroku master
Done. You should now see a deploy link. Open it up and you should see your site.
Hope that helped, if you have any issues try typing heroku local on your machine for some more insight.
..
..
..
Still here?
Fine fine.. you’ve convinced me.. here’s a bonus.
Seeing as Heroku employs magical unicorns and it https all the things. You can add this to your server.js to perform a protocol redirect.
// Heroku automagically gives us SSL
// Lets write some middleware to redirect us
let env = process.env.NODE_ENV || 'development';
let forceSSL = (req, res, next) => {
if (req.headers['x-forwarded-proto'] !== 'https') {
return res.redirect(['https://', req.get('Host'), req.url].join(''));
}
return next();
};
if (env === 'production') {
app.use(forceSSL);
}
Be sure to place it directly under const app = express() otherwise urls like index.html will not redirect.
Recent Comments