Implement Angular Server Side Rendering and Deploy Angular Universal App to Firebase with Schematics
Tags: angular, firebase
Published: 2020-05-21 03:52:24

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](https://www.ngdevelop.tech/blog/)'s Blogs : Checkout the complete article at 📄[Implement Angular Server Side Rendering With Just One Command](https://www.ngdevelop.tech/implement-angular-server-side-rendering/)

# Quick View
![Implement Angular SSR and Angular Universal App Deployment to Firebase](https://www.ngdevelop.tech/wp-content/uploads/2020/05/Implement-Angular-Server-Side-Rendering-1.png)
*Source: [NgDevelop Blog](https://www.ngdevelop.tech/implement-angular-server-side-rendering/)*
# 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](https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/), 53% of mobile users leave a site that takes longer than three seconds to load.

![Source : Google/SOASTA Research, 2017.](https://www.ngdevelop.tech/wp-content/uploads/2019/09/mobile-page-speed-new-industry-benchmarks.png)

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. 

```sh
ng add @nguniversal/express-engine
```
![ng add @nguniversal/express-engine](https://www.ngdevelop.tech/wp-content/uploads/2020/05/ng-add-universal.gif)
*Angular universal schematic execution*
*Source: [Implement Angular Server Side Rendering Blog](https://www.ngdevelop.tech/implement-angular-server-side-rendering/)*

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

```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](https://www.ngdevelop.tech/wp-content/uploads/2020/05/ng-add-angular-fire.gif)
*Deploy Angular Universal as a Firebase Cloud Function : ng add @angular/fire* *Source: [Implement Angular Server Side Rendering Blog](https://www.ngdevelop.tech/implement-angular-server-side-rendering/)*

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/](https://angularpractice-c30b3.web.app/)

> Checkout the original article here : [Implement Angular Server Side Rendering](https://www.ngdevelop.tech/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.