Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
timer SALE ENDS IN
0 Days
:
00 Hours
:
00 Minutes
:
00 Seconds
Server-Side Enterprise Development with Angular
Server-Side Enterprise Development with Angular

Server-Side Enterprise Development with Angular: Use Angular Universal to pre-render your web pages, improving SEO and application UX

Arrow left icon
Profile Icon Borggreve
Arrow right icon
$19.99 per month
Paperback Nov 2018 142 pages 1st Edition
eBook
$22.99 $25.99
Paperback
$32.99
Subscription
Free Trial
Renews at $19.99p/m
Arrow left icon
Profile Icon Borggreve
Arrow right icon
$19.99 per month
Paperback Nov 2018 142 pages 1st Edition
eBook
$22.99 $25.99
Paperback
$32.99
Subscription
Free Trial
Renews at $19.99p/m
eBook
$22.99 $25.99
Paperback
$32.99
Subscription
Free Trial
Renews at $19.99p/m

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing
Table of content icon View table of contents Preview book icon Preview Book

Server-Side Enterprise Development with Angular

2. Server-Side Rendering

Learning Objectives

By the end of the chapter, you will be able to:

  • Add support for server-side rendering using Angular Universal
  • Build a server to host a server-side rendered app
  • Add dynamic metadata to our pages
  • Deploy the app to the cloud

This chapter shows us how to create a universal app, enable server-side rendering, and deploy our app to Docker.

Introduction

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

Generating the Universal Code

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

Enabling Support for Lazy Loading

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.

...

Building the Server

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

Adding Dynamic Metadata

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

Deploying to Production

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

Summary

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.

Left arrow icon Right arrow icon

Key benefits

  • Explore differences between server-side and client-side rendering
  • Learn how to create a progressive web app with great SEO support
  • Discover best practices and how to use them to develop an app

Description

With the help of Server-Side Enterprise Development with Angular, equip yourself with the skills required to create modern, progressive web applications that load quickly and efficiently. This fast-paced book is a great way to learn how to build an effective UX by using the new features of Angular 7 beta, without wasting efforts in searching for referrals. To start off, you'll install Angular CLI and set up a working environment, followed by learning to distinguish between the container and presentational components. You'll explore advanced concepts such as making requests to a REST API from an Angular application, creating a web server using Node.js and Express, and adding dynamic metadata. You'll also understand how to implement and configure a service worker using Angular PWA and deploy the server-side rendered app to the cloud. By the end of this book, you'll have developed skills to serve your users views that load instantly, while reaping all the SEO benefits of improved page indexing.

Who is this book for?

Server-Side Enterprise Development with Angular is for you if you are an experienced front-end developer who wants to quickly work through examples that demonstrate all the key features of server-side development. You need some prior exposure to Angular to follow through this book.

What you will learn

  • Identify what makes an Angular application SEO-friendly
  • Generate commands to create components and services
  • Distinguish between the container and presentational components
  • Implement server-side rendering using Angular Universal
  • Create a web server using Node.js and Express
  • Add dynamic metadata to your web application
  • Deploy a server-side rendered app to the cloud
  • Implement and configure a service worker using Angular PWA

Product Details

Country selected
Publication date, Length, Edition, Language, ISBN-13
Publication date : Nov 29, 2018
Length: 142 pages
Edition : 1st
Language : English
ISBN-13 : 9781789806267
Languages :
Concepts :
Tools :

What do you get with a Packt Subscription?

Free for first 7 days. $19.99 p/m after that. Cancel any time!
Product feature icon Unlimited ad-free access to the largest independent learning library in tech. Access this title and thousands more!
Product feature icon 50+ new titles added per month, including many first-to-market concepts and exclusive early access to books as they are being written.
Product feature icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Product feature icon Thousands of reference materials covering every tech concept you need to stay up to date.
Subscribe now
View plans & pricing

Product Details

Publication date : Nov 29, 2018
Length: 142 pages
Edition : 1st
Language : English
ISBN-13 : 9781789806267
Languages :
Concepts :
Tools :

Packt Subscriptions

See our plans and pricing
Modal Close icon
$19.99 billed monthly
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Simple pricing, no contract
$199.99 billed annually
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts
$279.99 billed in 18 months
Feature tick icon Unlimited access to Packt's library of 7,000+ practical books and videos
Feature tick icon Constantly refreshed with 50+ new titles a month
Feature tick icon Exclusive Early access to books as they're written
Feature tick icon Solve problems while you work with advanced search and reference features
Feature tick icon Offline reading on the mobile app
Feature tick icon Choose a DRM-free eBook or Video every month to keep
Feature tick icon PLUS own as many other DRM-free eBooks or Videos as you like for just $5 each
Feature tick icon Exclusive print discounts

Frequently bought together


Stars icon
Total $ 114.97
Angular Design Patterns
$32.99
Learn React with TypeScript 3
$48.99
Server-Side Enterprise Development with Angular
$32.99
Total $ 114.97 Stars icon

Table of Contents

3 Chapters
1. Creating the Base Application Chevron down icon Chevron up icon
2. Server-Side Rendering Chevron down icon Chevron up icon
3. Service Workers Chevron down icon Chevron up icon
Get free access to Packt library with over 7500+ books and video courses for 7 days!
Start Free Trial

FAQs

What is included in a Packt subscription? Chevron down icon Chevron up icon

A subscription provides you with full access to view all Packt and licnesed content online, this includes exclusive access to Early Access titles. Depending on the tier chosen you can also earn credits and discounts to use for owning content

How can I cancel my subscription? Chevron down icon Chevron up icon

To cancel your subscription with us simply go to the account page - found in the top right of the page or at https://subscription.packtpub.com/my-account/subscription - From here you will see the ‘cancel subscription’ button in the grey box with your subscription information in.

What are credits? Chevron down icon Chevron up icon

Credits can be earned from reading 40 section of any title within the payment cycle - a month starting from the day of subscription payment. You also earn a Credit every month if you subscribe to our annual or 18 month plans. Credits can be used to buy books DRM free, the same way that you would pay for a book. Your credits can be found in the subscription homepage - subscription.packtpub.com - clicking on ‘the my’ library dropdown and selecting ‘credits’.

What happens if an Early Access Course is cancelled? Chevron down icon Chevron up icon

Projects are rarely cancelled, but sometimes it's unavoidable. If an Early Access course is cancelled or excessively delayed, you can exchange your purchase for another course. For further details, please contact us here.

Where can I send feedback about an Early Access title? Chevron down icon Chevron up icon

If you have any feedback about the product you're reading, or Early Access in general, then please fill out a contact form here and we'll make sure the feedback gets to the right team. 

Can I download the code files for Early Access titles? Chevron down icon Chevron up icon

We try to ensure that all books in Early Access have code available to use, download, and fork on GitHub. This helps us be more agile in the development of the book, and helps keep the often changing code base of new versions and new technologies as up to date as possible. Unfortunately, however, there will be rare cases when it is not possible for us to have downloadable code samples available until publication.

When we publish the book, the code files will also be available to download from the Packt website.

How accurate is the publication date? Chevron down icon Chevron up icon

The publication date is as accurate as we can be at any point in the project. Unfortunately, delays can happen. Often those delays are out of our control, such as changes to the technology code base or delays in the tech release. We do our best to give you an accurate estimate of the publication date at any given time, and as more chapters are delivered, the more accurate the delivery date will become.

How will I know when new chapters are ready? Chevron down icon Chevron up icon

We'll let you know every time there has been an update to a course that you've bought in Early Access. You'll get an email to let you know there has been a new chapter, or a change to a previous chapter. The new chapters are automatically added to your account, so you can also check back there any time you're ready and download or read them online.

I am a Packt subscriber, do I get Early Access? Chevron down icon Chevron up icon

Yes, all Early Access content is fully available through your subscription. You will need to have a paid for or active trial subscription in order to access all titles.

How is Early Access delivered? Chevron down icon Chevron up icon

Early Access is currently only available as a PDF or through our online reader. As we make changes or add new chapters, the files in your Packt account will be updated so you can download them again or view them online immediately.

How do I buy Early Access content? Chevron down icon Chevron up icon

Early Access is a way of us getting our content to you quicker, but the method of buying the Early Access course is still the same. Just find the course you want to buy, go through the check-out steps, and you’ll get a confirmation email from us with information and a link to the relevant Early Access courses.

What is Early Access? Chevron down icon Chevron up icon

Keeping up to date with the latest technology is difficult; new versions, new frameworks, new techniques. This feature gives you a head-start to our content, as it's being created. With Early Access you'll receive each chapter as it's written, and get regular updates throughout the product's development, as well as the final course as soon as it's ready.We created Early Access as a means of giving you the information you need, as soon as it's available. As we go through the process of developing a course, 99% of it can be ready but we can't publish until that last 1% falls in to place. Early Access helps to unlock the potential of our content early, to help you start your learning when you need it most. You not only get access to every chapter as it's delivered, edited, and updated, but you'll also get the finalized, DRM-free product to download in any format you want when it's published. As a member of Packt, you'll also be eligible for our exclusive offers, including a free course every day, and discounts on new and popular titles.