In this chapter, we will add server-side rendering to the application that we built in the previous chapter. We will use ng generate to add Angular Universal to our application, and add a few commands to package.json so that we can build the whole app in a single command.

We will implement a simple Node.js server based on NestJS. This server will compile and serve our application when requested so that the complete rendered app gets sent to the browser.

How does a Normal App Render?

First, let's take a look at how a normal Angular application without server-side rendering behaves.

When we start the server in development mode using ng serve and use the View Source option in our browser to check the source, we can see that the only thing that gets rendered is the output from file src/index.html file, with a few scripts appended at the bottom.

These scripts will be downloaded by the browser and after they have been downloaded and executed, the application...

Since Angular CLI version 1.6, there is support for Angular Universal, and since version 6.x, it has been advanced even more. We can use the ng generate command to generate the majority of the code we need to add support for server-side rendering.

Note

Schematics is the name of the workflow tool that powers code generation in Angular CLI. You can write your own schematics to generate custom code using ng generate. If you would like to learn more about Schematics, you can refer to a blog post about it at https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2.

Let's explore what happens when running the generator in more detail:

Figure 2.5: Running the generator command

Running this generator will change a few things in the current app:

• It will add a new architect to the angular-social app in angular.json.
• It will add the @angular/platform-server dependency to package.json.
• It updates the...

To get our server-side rendering working correctly, we need to make sure that we add the ModuleMapLoaderModule. This is a third-party module that is needed to make Angular Universal apps work with lazy loading.

In software development, we talk about lazy loading if we defer loading a certain object or piece of code to the point where we need it. In Angular specifically, this is done by defining certain routes to be loaded at the moment they are requested. The Angular build process will use code splitting to build lazy-loaded parts of the application in separate files. When the user then navigates to this part of the application, the browser will download that file and execute it.

The benefit of this approach is that the initial download size is smaller, and that a user does not have to download parts of the application that are not being used. This decreases the initial loading time of the application and potentially saves network bandwidth.

Now that both of the applications can be built, we can move on to create a simple server to host the applications.

To do this, we will create a simple Node.js server built with Nest, a framework that uses Express.js and offers great support for running Angular Universal apps. Another great benefit of Nest is that the structure and terminology is inspired by Angular, so it's easy to understand how to extend the API.

We will build the server in the folder called server in the root, create a WebPack config to build the Nest server, and add a run script so that we can build the server using a single command.

Note:

The current implementation of Angular Universal depends on Node.js as it is implemented in JavaScript. It is possible to run Angular Universal apps using other servers like ASP.NET, though under the hood, the ASP.NET server will invoke a Node.js process to handle the Angular Universal part. An example repository of how to run Angular Universal...

Now that our pages can are rendered using server-side rendering, we can introduce new functionality to improve the app's behavior. At the moment, the app will still only display the default title set in src/index.html, and we won't have any other HTML meta tags added.

To enhance the SEO friendliness of our page, and to make sure that there is valuable information in our social preview, we want to address this.

Luckily, Angular comes with the Meta and Title classes, which allow us to add dynamic titles and metadata to our pages. When combined with server-side rendering, the metadata and page title will make sure that the pages that are indexed by the search engine have the proper meta tags set in the document header, and thus increase findability.

In this section, we will add a service that allows us to define this data, and we will update our container components to call in that service after the data is loaded from our resolvers.

Exercise...

In this section, we will learn how to deploy a production version of the app to the cloud. A common way to deploy applications is using Docker. With Docker, you can create a container that holds and runs the app.

Docker containers are portable, so once they are built, they can run on different machines or platforms. We will deploy the app to now.sh using Docker. This will make the app available on the internet so that we can share it with others.

For information on how to install Docker, you can visit the Docker Getting Started website (https://docs.docker.com/v17.09/get-started/) or the official documentation (https://docs.docker.com/).

Exercise 44: Adding a Dockerfile to our Project

In this exercise, we will add a Dockerfile to our project. Follow these steps to complete this exercise:

1. Create a file called Dockerfile in the root of the project.
2. Add the following contents:

   FROM node:10-alpine
   RUN mkdir -p /app/dist
   WORKDIR /app
   COPY ...

In this chapter, we installed and configured Angular Universal and built a server using the NestJS framework. After that, we added support for dynamic metadata and a Docker configuration so that we could deploy our application to the cloud.

In the next chapter, we will configure service workers in our application.