The code you've built thus far is available for download here. Once you download it, remember to install the project using the npm install command inside the project directory.

Your application is ready. You've built it using the ng build --prod command that minifies JavaScript, performs tree shaking and other kinds of magic to boost performance. Let's test it in the battlefield. That's the moment where you are going to use the Heroku account, so if you don't have one sign up for it. You should also have Heroku CLI installed on your machine.

Creating a Heroku application#

Use Heroku CLI to create a new project:

heroku create

After executing this command, Heroku CLI should set up a Git remote in your Angular project. Verify that by executing the following command:

git remote -v

Deploying to Heroku#

This task is straightforward - just push your changes to the Heroku Git:

git add .

git commit -am "make it better"

git push heroku master

Measuring performance#

Let's measure performance of the server's response. You can use the Byte Check website to measure time to first byte (TTFB) for any website available on the Internet. It's a really good practice to use systems like this instead of performing tests on your machine, as they don't rely on your home network connection.

After performing a few tests, you can see that TTFB of your application is around 70 ms. Quite impressive. Of course, server response time is important, but it's not a useful metric for Angular applications.