How to Deploy an Angular 9 App to Heroku

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.

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 always is to create a new app. 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 the moment, we have 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. So, talking in basic English, 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 pack 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?

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

1. Serve our static files.

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

2. 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.

3. 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 is to run it. 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.

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.

• GitHub repo for this article

Feel free to ask me anything, I would love to answer your questions.

Thanks for reading.

#angular #heroku #javascript #programming