How to Deploy Your Angular App to Heroku

First setup the anguler app using bellow commands

$ ng new my-new-app
 

 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.

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.

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 heroku dashboard and setup app in heroku dashboard.

Setup done in heroku ?? then

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);

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.

References
https://github.com/klement97/angular-heroku
https://medium.com/better-programming/how-to-deploy-your-angular-9-app-to-heroku-in-minutes-51d171c2f0d