Ankit Prajapati

Posted on May 21, 2020 • Originally published at ngdevelop.tech

Implement Angular Server Side Rendering and Deploy Angular Universal App to Firebase with Schematics

#angular #firebase

In this article, we will see,

How to implement angular server-side rendering with just one command using angular universal schematic.
Deploy Angular Universal Project as a Firebase Cloud function using firebase schematic.

Before we start with the implementation of server-side rendering in Angular with Angular Universal, let’s see why server-side rendering and what is Angular Universal?

This blog originally published🚀 at NgDevelop's Blogs : Checkout the complete article at 📄Implement Angular Server Side Rendering With Just One Command

Quick View

Source: NgDevelop Blog

Why Server-Side Rendering? and What is Angular Universal?

Loading the first-page quickly is a critical part of any web application.

Normal Angular applications get loaded only when it loads the required main.js, vendor.js, pollyfills.js and runtime.js. As your main.js size increases initial loading time also increases.

According to 2018 research by Google, 53% of mobile users leave a site that takes longer than three seconds to load.

We can optimize the initial loading time of angular application using angular universal (server-side rendering).

This will quickly load the initial page, which will give the user a chance to quickly view the initial layout until a complete angular application becomes fully interactive.

Server-Side Rendering also helps in SEO (Search Engine Optimization) and Improving performance on mobile and low powered devices.

Implement Angular Server Side Rendering with Just One Command

In Angular 9 release, Angular Universal Team came up with a ng add schematic to implement SSR in angular application.

ng add @nguniversal/express-engine

Angular universal schematic execution
Source: Implement Angular Server Side Rendering Blog

This schematic will add and update all required files to implement server-side rendering in angular application.

This will add the following files :

src/main.server.ts
src/app/app.server.module.ts
tsconfig.server.json
server.ts

and update the following files :

angular.json
package.json
src/main.ts
src/app/app.module.ts

Server-Side Rendering on Local System

@nguniversal/express-engine schematic also add the CLI builders to start server-side rendering on the local system and generating production build with SSR.

This schematic adds the following scripts in package.json.

"dev:ssr": "ng run [project_name]:serve-ssr",
"serve:ssr": "node dist/[project_name]/server/main.js",
"build:ssr": "ng build --prod && ng run [project_name]:server:production",
"prerender": "ng run [project_name]:prerender"

Using the following command, We can start rendering our app with Universal on the local system.

npm run dev:ssr

This will serve the angular application with server-side rendered pages on localhost:4200. you can confirm angular universal implementation by looking into the page source.

If you find rendered HTML in the page source, Great !!! angular universal implementation is done ✨✨✨

Deploy Angular Universal App to Firebase

Angular Firebase Team also has added a new feature in ng add @angular/fire.

While you add the @angular/fire using ng add, it will check whether the current project is an angular universal project, if yes it will ask the following question.

We detected the Angular Universal Project, Do you want to deploy it as a Firebase Function?

If you enter y/yes here, it will install some more packages to implement firebase cloud functions to deploy angular universal project.

Deploy Angular Universal as a Firebase Cloud Function : ng add @angular/fire Source: Implement Angular Server Side Rendering Blog

Once Firebase installation is done we can 🚀deploy our angular universal project to firebase using just ng deploy command.

Once the application is hosted on the server, it will give you the running URL. Open this URL in a browser, and verify whether Server Side Rendering is done or not.

If all the above steps are successfully executed, Great!!! You have successfully deployed your angular universal app to firebase.✨✨✨

Checkout the sample deployed application here : https://angularpractice-c30b3.web.app/

Checkout the original article here : Implement Angular Server Side Rendering

I hope you like this article, please provide your valuable feedback and suggestions in below comment section🙂.

Show your ❤ with like and comments.

Thank you.

Top comments (8)

Dave • Dec 4 '20

This is great! After spending a few days struggling to get SSR working this is the most straightforward one to get it working. Is there anyway to change the region the ssr cloud function gets deployed to? I have an existing project with cloud functions running in europe-west1 region.

Søren Smedegaard • Mar 26 '21

I would also like to know how I can change the region. Did you find a solution, Dave?

Dave • Mar 26 '21

Hi Søren, no unfortunately I didn’t go with SSR in the end for my project. Instead I used Scully to generate a static site which achieved what I wanted and seems less flaky than SSR.