Deployment Of Angular App To Heroku

Heroku is really amazing. It is actually a platform-as-a-Service (PaaS) that lets you build, monitor, and scale your apps. It is one of the best cloud Platform-as-a-Service options out there and it is suitable when you want to build the back-end of your application yourself from scratch.

In the project folder, you should see the server.js file.

This is the super simple node application. And if you have never worked with node.js before, don’t worry, this is just an example. If you want to use a different framework or language at the back-end, like ASP.NET, Python, PHP or whatever, the steps you need to follow to deploy your application are very similar. There might be one or two different steps and you can easily find the tutorial to learn how to use Angular on the front-end and your framework of your choice on the back-end. And then, you can easily deploy the application on Heroku.

So, let’s see how we can deploy the application on Heroku.

Step 1

Go to the Heroku.com.
Create an account.
Search for Heroku CLI on Google; you’ll see this link. From this link, download and install Heroku CLI.

Step 2

Now, let’s verify the installation of Heroku. So hit the following command in VS Code terminal.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> heroku --version

Now, we need to log into Heroku.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> heroku login

We have successfully logged in.

Step 3

Now, we need to create a new Heroku app.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> heroku create <name>

We can give it the name here but this name has to be unique. Alternatively, we can just leave the name field because Heroku CLI will automatically generate a random name.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> heroku create

So, this is the name of our application (fierce-plains-80797) with its complete address.

We can simply copy paste the complete address in Chrome or we can run the command in the terminal as.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> heroku open

And now, it will be automatically opened in your default browser.

Well, this is our Heroku app.

Step 4

Now, we want to replace this with our Angular app.

When we deploy our application, Heroku is going to look at the package.json file of the project. It is going to look under dependencies in package.json and install all of these with npm.

At this point, we want to build our application using Angular CLI on Heroku. Now, Angular CLI is one of the devDependencies itself.

Heroku is not going to install this. So by default, we cannot build our application using Angular CLI on Heroku. To fix this issue, we need to move Angular CLI to the dependencies node. So, cut @angular/cli and @angular/compiler-cli from devDependencies and paste it into dependencies. We need @angular/compiler-cli also because of the Ahead of Time (AOT) compilation.

"dependencies": {
"@angular/cli": "1.2.4",
"@angular/compiler-cli": "^4.0.0",
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"rxjs": "^5.4.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/language-service": "^4.0.0",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "~2.3.3"
}

These are my dependencies and devDependencies objects. When we supply a prod flag, Angular CLI is going to use the Angular Compiler to precompile our application.

This Angular Compiler is built on the top of TypeScript compiler.

"@angular/compiler-cli": "^4.0.0"

So as another dependency, we should also move TypeScript from devDependencies to dependencies.

"dependencies": {
"@angular/cli": "1.2.4",
"@angular/compiler-cli": "^4.0.0",
"@angular/animations": "^4.0.0",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"rxjs": "^5.4.1",
"typescript": "~2.3.3",
"zone.js": "^0.8.14"
}

So now, we have proper dependencies, Heroku is going to install all of these.

Step 5

Now, we need to build our application. But how? To build the application, we’ll use a reserved script “postinstall” in the script object. It runs automatically after all these dependencies are installed.

"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build --prod",
"deploy:firebase": "ng build --prod && firebase deploy",
"deploy:gh": "ng build --prod --base-href='https://techyguy786.github.io/github-followers/' && ngh"
}

And at this point, our front-end is ready.

Step 6

Now, come back to server.js. This is the code of server.js.

const express = require('express');
const app = express();
app.use(express.static(__dirname + '/dist'));
app.all('*', (req, res) => {
res.status(200).sendFile(__dirname + '/dist/index.html');
});
app.listen(process.env.PORT || 8080);

In the first line, we’re importing the Express framework for building web applications on Node. Because we’re using Express on the back-end, we need to add it as a dependency in the package.json as well.

So back in the terminal,

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> npm i express --save

And now, it is successfully installed.

Step 7

Now, we need to change start property in the script section in package.json. And instead of serving it as an Angular application, we need to start node server. So,

"scripts": {
"ng": "ng",
"start": "node server.js",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"postinstall": "ng build --prod",
"deploy:firebase": "ng build --prod && firebase deploy",
"deploy:gh": "ng build --prod --base-href='https://techyguy786.github.io/github-followers/' && ngh"
}

So node is going to run server.js which is our web server. The job of this web server is to host our static content and expose any api endpoints.

Let’s take a quick look on server.js

const express = require('express');
const app = express();
app.use(express.static(__dirname + '/dist'));
app.all('*', (req, res) => {
res.status(200).sendFile(__dirname + '/dist/index.html');
});
app.listen(process.env.PORT || 8080);

So we get app object from express.

app.use() in this statement we’re telling this app object to host our static content from the dist folder. This is where we store our built angular application. Here we don’t have any API Endpoints but in your application, you’ll be adding the api endpoint after app.use(). Maybe you have a couple of api endpoints or you may have a complex application; then instead of adding all your api endpoints in server.js, you may have a folder like a server. And in that folder, for each API Endpoint, you’re going to have a separate javascript file like courses.js, messages.js etc. So you register all your api endpoints and in your handlers, you simply use a database like Mongo or whatever to get or save the data.

app.all('*', (req, res) => {
res.status(200).sendFile(__dirname + '/dist/index.html');
});

Here, we’re catching all the invalid routes. So for any other routes, we’re going to send this /dist/index.html to the client. And this is for solving the same problem we had when deploying our application to firebase. When we were refreshing the followers page, by default we were getting a 404 error. So in the firebase article, we rewrite the url to redirect the client to index.html. And here these above few lines are exactly for the same reason.

app.listen(process.env.PORT || 8080);

Here we’re listening to the environment port which is often 80 or if it is not supplied, 8080. So this is the simple backend implementation.

Step 8

Now we’re ready to deploy our application. First, we need to commit our changes to git.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> git add .

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> git commit -m "Prepare for Heroku"

When we create the heroku app we use the Heroku cli through this command.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> heroku create

This Heroku cli registers the remote git repository. So let’s see

Look, we’ve 2 remotes here (Heroku and origin). So every time you want to deploy your application, all we have to do is to push our changes to Heroku.

At this point, Heroku is the continuous deployment process. It checks out all the latest code from that repository. It is going to build the application and install all the dependencies and run the node server. Let’s see this in action.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> git push heroku master

And now our application is deployed successfully.

Step 9

And now let’s have a look at Heroku in the browser.

PS C:\Users\Ami Jan\deploy-demo\deploy-demo> heroku open

So this is how we deploy the application on Heroku.

Engines

Now we have seen the steps to deploy the application on Heroku. Now there is one more step which is really not required but something recommended to do to prevent any potential problems. So let’s go to the package.json and at the end of the main object (at the same level of devDependencies and dependencies). Here we use the new key called “engines”. And in this new key we can set the versions of node and npm that we have in our local machine. And Heroku is going to use the exact same versions.

So in your VS Code terminal check the versions of npm and node.

Now we can mention the same versions in the engines key.

And in case you get any kind of issue during deployment of Heroku, follow this step and deploy the application again to Heroku. Hopefully, it will resolve your problem.