Deploy Your Angular 5 Application To Heroku

You are done with development of your application now you want to build and deploy your application to test it out live. Heroku is a cloud platform it is easy to use and you can run maximum 5 applications freely.

Build Your Application

Using Angular CLI’s ng build command you can build your application

ng build

This will create seperate dist folder with all the built files.

Now we need a server to serve the files when request comes.

Create a Server

We will Express Framework of javascript to serve the files.
Run the below command to install express.

 npm install express --save

Create a server.js file

Create a server.js file in the root of your application.

var express = require('express');
var path = require('path');
var app = express();


const port = process.env.PORT||8080;

//Set static Folder
app.use(express.static(path.join(__dirname + '/dist')));

//Index routing 
app.get('/*', (req, res)=>{
    res.sendFile(path.join(__dirname + '/dist/index.html'));
});

app.listen(port, function(){
    console.log('Server started on port', port);
});

All we are doing in the above lines of the code is that we are setting our app to static folder dist. And any request comes from /* (from route any routes) we are serving index.html.

To serve these files we need a port. We are using process.env.PORT dynamically detect freely available port or else it will listen to port 8080.

Modify package.json

We need to tell heroku which version of node and npm we are using, so add the below line of code to your package.json. Check your versions and modify them.

  "engines": {
    "node": "8.9.1",
    "npm": "5.6.0"
  }

Deploy Your Angular 5 Application To Heroku

Install Heroku CLI

We need heroku CLI to push our code to heroku.
Run the command

npm install -g heroku

If you don’t have a heroku account by visiting https://signup.heroku.com/ you can create an account

Login to Heroku

By running below command you can login to your heroku account.

heroku login

Create a Heroku App

We need a heroku app to push our code.
By running below command you can create an heroku application.

heroku create

Above command will creates an application with random name.

You can visit your heroku dashboard to check application created or not https://dashboard.heroku.com/apps/

Create a new heroku git repository

We will use heroku git to push our code.
By running below command you can create a heroku git repository.
Do the git init first and run below command.

  heroku git:remote -a <your app name>

Deploy Your Angular 5 Application To Heroku

Deploy Your Application

Now all we have to do is

 git add .

and then

 git commit -am "make it better"

and then

git push heroku master

that’s it!

once it is done pushing your app should be up and running live you can check it by visiting to the url shown in the settings section of your application in the heroku dashboard. It will also be displayed on the terminal.

I hope it helped.
Happy Coding..!