How to Easily Deploy Your First Angular App On Heroku

Are you a developer who has just completed an Angular app? I assume you don't want to keep this app only for you, mostly you would want anyone to access this app, and if it is just a personal project of yours from which you know you are not going to make any money you probably would like not to spend any on it too.

Heroku to the rescue!!!

In this article, we will go through the steps to deploy an Angular application to the Heroku server.

In this article, we will discuss the following assuming your code is available in a GitHub repository.

• Creating a Heroku Application
• Link your GitHub repo to the Heroku application for Automatic Deployment.
• Configure Angular app for Heroku server

Creating a Heroku Application

Create a Heroku account for free here. If you already have an account then log in and go to the dashboard.

Here you need to create a new app.

And enter a unique app name

Link your GitHub repo to the Heroku application for Automatic Deployment.

To do this, you can go to your Heroku app. Under the deploy section, you need to select the second option GitHub. ( If your Heroku account is not connected to git hub you will have to log in to Github and connect your GitHub account.) and you will be able to see an input box to search the repository associated with your git hub account. You can look for your repo and click connect.

Once the repository is connected you can select enable automatic deploys and you are all done now whenever there is a push to your Github repo Heroku will automatically deploy the changes.

But still, your Angular build will fail. As we have not configured the angular application for Heroku deployment. So let's do that now.

Configure Angular app for Heroku server

Firstly you need to ensure you have angular cli and angular compiler dev-dependencies in your project.

So you can go to your package.json file and verify if you have @angular/cli and @angular/compiler-cli in dev dependencies. if not you need to run the below cmd in your project's root folder.

npm install @angular/cli@latest @angular/compiler-cli — save-dev

Now in your package.json copy the below codes from dev-dependencies and paste them to the dependencies object.

“@angular/cli”: “x.x.x”,
“@angular/compiler-cli”: “x.x.x”,

and

“typescript”: “x.x.x”

Now we need to add a script that will tell Heroku to build the project using the ahead of time (AOT) compiler so that we have HTML, javascript files that the browser will understand. So we add the below in the scripts in package.json.

“heroku-postbuild”: “ng build — prod”

This will create all the complied files and place them in the dist folder that will be deployed.

Now it is important to know that we cannot deploy an angular application as it is so we will create a node server that will serve our application. to do this is very simple.

First, we will install the express module and path in our project, to do so run the below cmd in the project directory.

npm install express path --save

now create a file server.js in the root directory of your project and add the below code keep in mind to replace <app-name> with your actual app name that can be found in the package.json name key.

const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(__dirname + '/dist/<app-name>'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname+
'/dist/<app-name>/index.html'));});
app.listen(process.env.PORT || 8080);

now we need to add a node and npm engine that Heroku will use to run our application. so add the below code in the package.json file. as a new key-value pair.

“engines”: { “node”: “x.x.x”, “npm”: “x.x.x” }

we would preferably want to configure the node and npm of the same version that we have on our local machine. So run the commands npm -v and node-v to get the versions.

Now we are almost done one last step is to change the start script in package.json to

"start" : "node server.js"

and we are all set. Let’s add, commit and push the code to Github using

git add .
git commit -m "updates to deploy to heroku"
git push

or any other way that you prefer.

Once you are done you will be able to see the build is started automatically in the Heroku app dashboard as we have already done the configuration for that in the above steps.

Once deployment is successful you can click the open app button on the top and visit your angular application and share that link with anyone so that they can access your application.

Thank you for the read do reach out to me in the comments if you have any questions or suggestions.