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🙂.
Top comments (8)
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.
I would also like to know how I can change the region. Did you find a solution, Dave?
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.
super easy, to the point, thanks a lot
Could you please add Git source code with the blog?
Hello,
Really useful content. I follow same steps but when I run ng deploy command then firebase function is not deployed.
Updated Version for Angular 12 - dev.to/jdgamble555/deploy-angular-...
how to deploy SSR build on tomcat