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

eBook
€8.99 €19.99
Paperback
€24.99
Subscription
Free Trial
Renews at €18.99p/m

What do you get with Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
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
Estimated delivery fee Deliver to Czechia

Premium delivery 7 - 10 business days

€25.95
(Includes tracking information)

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 Print?

Product feature icon Instant access to your digital eBook copy whilst your Print order is Shipped
Product feature icon Paperback book shipped to your preferred address
Product feature icon Download this book in EPUB and PDF formats
Product feature icon Access this title in our online reader with advanced features
Product feature icon DRM FREE - Read whenever, wherever and however you want
OR
Modal Close icon
Payment Processing...
tick Completed

Shipping Address

Billing Address

Shipping Methods
Estimated delivery fee Deliver to Czechia

Premium delivery 7 - 10 business days

€25.95
(Includes tracking information)

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
€18.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
€189.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
€264.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 86.97
Angular Design Patterns
€24.99
Learn React with TypeScript 3
€36.99
Server-Side Enterprise Development with Angular
€24.99
Total 86.97 Stars icon
Banner background image

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 the delivery time and cost of print book? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela
What is custom duty/charge? Chevron down icon Chevron up icon

Customs duty are charges levied on goods when they cross international borders. It is a tax that is imposed on imported goods. These duties are charged by special authorities and bodies created by local governments and are meant to protect local industries, economies, and businesses.

Do I have to pay customs charges for the print book order? Chevron down icon Chevron up icon

The orders shipped to the countries that are listed under EU27 will not bear custom charges. They are paid by Packt as part of the order.

List of EU27 countries: www.gov.uk/eu-eea:

A custom duty or localized taxes may be applicable on the shipment and would be charged by the recipient country outside of the EU27 which should be paid by the customer and these duties are not included in the shipping charges been charged on the order.

How do I know my custom duty charges? Chevron down icon Chevron up icon

The amount of duty payable varies greatly depending on the imported goods, the country of origin and several other factors like the total invoice amount or dimensions like weight, and other such criteria applicable in your country.

For example:

  • If you live in Mexico, and the declared value of your ordered items is over $ 50, for you to receive a package, you will have to pay additional import tax of 19% which will be $ 9.50 to the courier service.
  • Whereas if you live in Turkey, and the declared value of your ordered items is over € 22, for you to receive a package, you will have to pay additional import tax of 18% which will be € 3.96 to the courier service.
How can I cancel my order? Chevron down icon Chevron up icon

Cancellation Policy for Published Printed Books:

You can cancel any order within 1 hour of placing the order. Simply contact customercare@packt.com with your order details or payment transaction id. If your order has already started the shipment process, we will do our best to stop it. However, if it is already on the way to you then when you receive it, you can contact us at customercare@packt.com using the returns and refund process.

Please understand that Packt Publishing cannot provide refunds or cancel any order except for the cases described in our Return Policy (i.e. Packt Publishing agrees to replace your printed book because it arrives damaged or material defect in book), Packt Publishing will not accept returns.

What is your returns and refunds policy? Chevron down icon Chevron up icon

Return Policy:

We want you to be happy with your purchase from Packtpub.com. We will not hassle you with returning print books to us. If the print book you receive from us is incorrect, damaged, doesn't work or is unacceptably late, please contact Customer Relations Team on customercare@packt.com with the order number and issue details as explained below:

  1. If you ordered (eBook, Video or Print Book) incorrectly or accidentally, please contact Customer Relations Team on customercare@packt.com within one hour of placing the order and we will replace/refund you the item cost.
  2. Sadly, if your eBook or Video file is faulty or a fault occurs during the eBook or Video being made available to you, i.e. during download then you should contact Customer Relations Team within 14 days of purchase on customercare@packt.com who will be able to resolve this issue for you.
  3. You will have a choice of replacement or refund of the problem items.(damaged, defective or incorrect)
  4. Once Customer Care Team confirms that you will be refunded, you should receive the refund within 10 to 12 working days.
  5. If you are only requesting a refund of one book from a multiple order, then we will refund you the appropriate single item.
  6. Where the items were shipped under a free shipping offer, there will be no shipping costs to refund.

On the off chance your printed book arrives damaged, with book material defect, contact our Customer Relation Team on customercare@packt.com within 14 days of receipt of the book with appropriate evidence of damage and we will work with you to secure a replacement copy, if necessary. Please note that each printed book you order from us is individually made by Packt's professional book-printing partner which is on a print-on-demand basis.

What tax is charged? Chevron down icon Chevron up icon

Currently, no tax is charged on the purchase of any print book (subject to change based on the laws and regulations). A localized VAT fee is charged only to our European and UK customers on eBooks, Video and subscriptions that they buy. GST is charged to Indian customers for eBooks and video purchases.

What payment methods can I use? Chevron down icon Chevron up icon

You can pay with the following card types:

  1. Visa Debit
  2. Visa Credit
  3. MasterCard
  4. PayPal
What is the delivery time and cost of print books? Chevron down icon Chevron up icon

Shipping Details

USA:

'

Economy: Delivery to most addresses in the US within 10-15 business days

Premium: Trackable Delivery to most addresses in the US within 3-8 business days

UK:

Economy: Delivery to most addresses in the U.K. within 7-9 business days.
Shipments are not trackable

Premium: Trackable delivery to most addresses in the U.K. within 3-4 business days!
Add one extra business day for deliveries to Northern Ireland and Scottish Highlands and islands

EU:

Premium: Trackable delivery to most EU destinations within 4-9 business days.

Australia:

Economy: Can deliver to P. O. Boxes and private residences.
Trackable service with delivery to addresses in Australia only.
Delivery time ranges from 7-9 business days for VIC and 8-10 business days for Interstate metro
Delivery time is up to 15 business days for remote areas of WA, NT & QLD.

Premium: Delivery to addresses in Australia only
Trackable delivery to most P. O. Boxes and private residences in Australia within 4-5 days based on the distance to a destination following dispatch.

India:

Premium: Delivery to most Indian addresses within 5-6 business days

Rest of the World:

Premium: Countries in the American continent: Trackable delivery to most countries within 4-7 business days

Asia:

Premium: Delivery to most Asian addresses within 5-9 business days

Disclaimer:
All orders received before 5 PM U.K time would start printing from the next business day. So the estimated delivery times start from the next day as well. Orders received after 5 PM U.K time (in our internal systems) on a business day or anytime on the weekend will begin printing the second to next business day. For example, an order placed at 11 AM today will begin printing tomorrow, whereas an order placed at 9 PM tonight will begin printing the day after tomorrow.


Unfortunately, due to several restrictions, we are unable to ship to the following countries:

  1. Afghanistan
  2. American Samoa
  3. Belarus
  4. Brunei Darussalam
  5. Central African Republic
  6. The Democratic Republic of Congo
  7. Eritrea
  8. Guinea-bissau
  9. Iran
  10. Lebanon
  11. Libiya Arab Jamahriya
  12. Somalia
  13. Sudan
  14. Russian Federation
  15. Syrian Arab Republic
  16. Ukraine
  17. Venezuela