Angular 8 universal

Angular 8 universal

Angular Universal is a technology that allows server-side rendering for Angular apps. An angular app is a single-page app, and it runs in a client-side browser. Rendering pages in the DOM is a response to the user reaction. 

Angular Universal executes in the server, generating static application pages that get bootstrapped on the client. This means that the application renders more quickly, giving users a chance to view the application layout before it becomes fully interactive.

We can easily prepare an app for server-side rendering using the Angular CLI. The CLI scematic @nguniversal/ express-engine performs the required steps, as described below.

Universal tutorial

The Tour of Heroes tutorial is the foundation for this walkthrough. In this example, the app with the Ahead-of-Time (AoT) compiler. A Node Express web server compiles HTML pages with Universal based on clients requests.

To create the server-side app module, app.server.module.ts, run the following CLI command.

ng add @nguniversal/express-engine --clientProject angular.io-example

The command creates the following folder structure.

src/index.html                    app web page
   main.ts                         bootstrapper for client app
   main.server.ts             * bootstrapper for server app
   style.css                       styles for the app
   app/ ...                         application code
     app.server.module.ts     * server-side application module
 server.ts                               * express web server 
 tsconfig.json                    TypeScript client configuration
 tsconfig.app.json            TypeScript client configuration
 tsconfig.server.json         * TypeScript server configuration
 tsconfig.spec.json            TypeScript spec configuration
 package.json                     npm configuration
 webpack.server.config.js     * webpack server configuration 

The files marked with * are new and not in the original tutorial sample.

Universal in Action

To start rendering our app with universal on our local system, use the following command.

npm run builds:ssr && npm serve:ssr

open the browser and transform it to http://localhost:4000/. We can get familiar with the Tour of Heroes dashboard page.

Navigation via routerLinks works correctly because they use the native anchor (<a>) tags. We can go from the Dashboard to the Dashboard to the Heroes page and back. We can click a hero on the Dashboard page to display its Details page.

We can simulate a slower network to see the translation more clearly as follows:

1. Open the chrome Dev Tools and go to the Network tab.
2. Find the Network Throtting dropdown on the far right of the menu bar.
3. Try one of the “3G” speeds.

Why we use server-side rendering?

There are mainly three main reasons to create a Universal version of our app.

• Facilitate web crawlers by search engine optimization (SEO)
• Improve performance on mobile and the low-powered devices.
• Show the first page with a first-contentful paint (FCP)

Universal web servers

A universal web server receives to application page requests within static HTML redered by the universal template engine. The server responds to HTTP requests from the clients (like browsers), and server static assets such as scripts, CSS, and images.

Universal applications use the Angular platform-server package, which provides server implementations of the DOM, XMLHttpRequest, and other low-level features.

The renderModuleFactory() function takes as inputs in a template HTML page (usually index.html), an Angular module containing components, and a route that determines which components we have to display. The route comes from the client request to the server.

Each request results in the appropriate view for the requested route. The renderModuleFactory() function renders the view within the <app> tag of the template, creating a finished HTML page for the client.

Step 1: Add Angular Universal

First, we have to add universal angular support to our angular application for that we will run one cmd.

ng add @nguniversal/express-engine –clientProject<project name>

Once it is done, we will see numerous changes in our project to know more about this transition visit Angular universal official

Step 2: Make changes in server.ts

Next step is to make changes in our server.ts

1. We need to add export in front of app variable

• We need to comment on the listening of our app, which is typically at the end of server.ts file.

Step 3: Export our app as a library

Now we need to export our app as a library with a library target as umd in web pack configuration typically its name is webpack.server.config.js

Step 4: Initialize and configure firebase

In this level, we first need to install firebase tools in our system.

Then, we need to login into firebase from our cli

And then, we will initialize  a firebase hosting in our project

Npm g firebase-tools
Once the above cmd succeeds
firebase login
firebase init 

Once, we have firebase in our angular project, and we need to make some changes in our firebase.json file.

We have to change the rewrite property in it.

“function”:”angularUniversalFunction”

Step 5: Build our project

npm run build:ssr

the above cmd has generated a dist folder which has three things in it a browser folder and serve.js file in our system.

Step 6: Automate the build folder movement

We need to copy the build folder form the root project to the functions folder for the  Smartcodehub.

npm i --save fs-extra

after the cmd, we will create one file and name it movedist.js, and the content will be

const fs = require('fs-extra');
 (
     async()=>{
         const src = './dist';
         const dist = './functions/dist';await fs.remove(dist);
         await fs.copy(src,dist);
     }
 )()

The above function will copy the dist from the root and paste it into functions folder.

Step 7: configure our primary firebase function

In thisa step, we need to set up our primary firebase function which is in the functions folder src directory and the filename is index.ts.

import * as functions from 'firebase-functions';const universal  = require(`${process.cwd()}/dist/server`).app;export const angularUniversalFunction = functions.https.onRequest(universal);

Step 8: deploy the firebase function

Rebuild our project

Npm run build: ssr

Node movedist.js

cd functions

Firebase deploy

SPAs have many advantages above old traditional apps like:

• The client is the responsibility of doing the most rendering. For the server, its primary role is serving the app files into the client.
• No page refresh
• No need for reaching the server for every action.
• Easy navigation between different pages.
• Improved performance.
• No special request of the server to load new pages.
• User-friendliness etc.

We call Universal apps, which SPAs with server-side rendering.