Deploying and Measuring Performance

Every journey has some end. At the end of software development is production. It's time to deploy your application to Heroku and test with multiple tools how it performs.

Deploying and Measuring Performance#

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.

There are, of course, tons of great places you can host your Angular app. AWS has a dozens of ways you could deploy it, even more adding Google Cloud, Azure, Digital Ocean, etc.

To keep thing "simple" we're going to focus on Heroku in this chapter, but know that the same principles apply to any deployment scenario where you can run the Node.js server.

Creating a Heroku application#

Use Heroku CLI to create a new project:

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

Deploying to Heroku#

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

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.

 

This page is a preview of The newline Guide to Angular Universal

No discussions yet