Heroku is a container-based cloud Platform as a Service (PaaS). It lets developers build, deliver, monitor, and scale their apps without infrastructure headaches.

In this post, we will deploy an Angular application built with version 9 which is the latest stable version right now. However, the configurations are not related to the angular version, you can deploy with older or newer versions using this tutorial.

Heroku says:

“We’re the fastest way to go from idea to URL.”

They are right about that. As a web application developer, I had the chance to see a couple of ways in which we can deploy our applications, and I can say that Heroku is the fastest of all.

Now let’s go ahead and start our Angular 9 project and make it ready for deployment. You can take the repo link at the bottom of this post for the deployment-ready project.

We’ve started a new Angular app using the latest CLI. This is what we get:

Let’s run ng serve to make sure our app is alright.

The app is alright so now let’s focus on deployment. What we need to do now is know what can we do with Heroku and how we can do it.

Getting Started

The first step is to create a new app in Heroku. So, an easy way to do this is to go to your dashboard and use the UI created for this.

Click on “Create new app” in the top-right corner.

Let’s give our app a name, select the region, and click “Create app”.

We will be redirected to a page like the below that shows us our options for how to deploy. Options are:

• Heroku Git
• GitHub integration
• Container Registry

We will be using Github integration in this post. After we create our repository on GitHub for our app, we can go-ahead. Click on the Github option and search for our repo.

After Heroku has found our repo, we just click the Connect button to connect the repo with Heroku. This will help us to make automatic deployments every time we push to our master branch.

After the connection has been established, you will see a page like this. What we see here is that we have an option to “Enable Automatic Deploys” from a branch we can select. If that is what you want, all you need to do is to click on that button.

At this moment, we’ve created our repo with a working app, connected it to Heroku, and enabled automatic deployments. So, every time we make a push to our master branch, Heroku will start a deployment process for us.

Everything is fine now and all we need is some deployment configs and a commit and push to the GitHub. Let’s start with what those configs are.

Now, where Heroku excels is their buildpack concept. Basicaly to take your app from localhost to a real URL, you need to give some instructions to a remote machine to perform the release and deployment.

What we need to tell the machine

1. Install our dependencies.
2. Make a production build of our application.
3. Deploy our production build on Heroku.
4. Serve our dist folder after it is deployed.
5. Launch the production on a given URL.

Thankfully, Heroku already has a buildpack that can tell the machine to do exactly what we need and it’s called Node.js Buildpack. All we have to do is to help out that buildpack a little bit.

First of all, we need a server for our application and what we are going to use is the Express server, which is a lightweight server to help us serve our app.

Let’s install it.

npm i express --save

Now we need a script in JS to tell Express what to do.

Create a file in your project’s root directory. I like to call it server.js.

What you need to change here is only the name of your application. It must be the same as the “name” attribute in your package.json.

Something important to note here is that the server.js file must be on your project’s root directory.

What Do We Do in the server.js File?

Basically saying, in the server.js file, what we are doing is using the Express server to:

1. Redirect all traffic from http to https.

function requireHTTPS(req, res, next) {
    // The 'x-forwarded-proto' check is for Heroku
    if (!req.secure && req.get('x-forwarded-proto') !== 'https') {
        return res.redirect('https://' + req.get('host') + req.url);
    }
    next();
}const express = require('express');
const app = express();
const app = express();
app.use(requireHTTPS);

2. Serve our static files.

app.use(express.static(’./dist/<name-on-package.json>’));

3. Wait for a request to any path and redirect all of the requests to index.html.

app.get(’/*’, function(req, res) {
  res.sendFile(’index.html’, {root: 'dist/<name-on-package.json>/’}
);
});

The Angular router will handle which component should be shown to the user according to the path they requested.

4. Listen for requests at the PORT specified by env variables or the default Heroku port, which is 8080.

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

Test That Everything is OK

A great trick here to test that everything is alright with that script without deploying it in heroku is to run it locally so we can save some time if there are any errors. After running ng build — prod we can do something really easy in the terminal:

The node server.js command will run what is inside the server.js file and we can check if there are any problems with our file before we deploy it on Heroku.

Notice that my working directory is my project’s root directory where my server.js file is located.

After that, we can go to localhost:8080 and see the application served from the dist folder.

Package.json

Now that we are sure the file is working correctly, let’s go ahead and make the required changes in package.json.

Change the start script to node server.js.

So, we don’t want to use the ng serve command because it is only for development, we need a real server for our production environment.

Change the build script to ng build --prod

package.json

Something to note here is that you need to make this change only in your production environment, which means only on the master branch, otherwise, we would end up running the Express server every time we run the start script.

Conclusion

That’s all. We are done with what is required to make our first deployment on Heroku. Now we will make a commit and a push to Heroku to trigger the deployment.

If you haven’t selected automatic deployments, what you need to do is make the push and then go to the Heroku Dashboard > Select your app > Deploy > Deploy Branch, at the end of the page.

The deployment process looks like this:

Heroku build phase for Node buildpack

If the build process has succeeded and your app is launched on the domain given by Heroku, visit it to make sure everything is alright.

As you can see below, our app is now hosted and served by Heroku. Angular-Heroku app.

Now we are done with the deployment process and our app is live. On my first try, it took me about four hours to deal with all the errors I had and make my first successful deployment. Do not let failures stop you to get your application online.

Bonus

If you are facing Heroku H10-App Crashed Error than this might be a sign that you have something wrong with the scripts and configs. This article here can help you solve this issue.