Angular 5 Server Side Rendering With Firebase 🔥 — Step-By-Step Guide

Intro

What we are going to use:

  • Angular 5+
  • AngularFire Lite ( ⚡️ Lightweight Angular Firebase API wrapper)

Why AngularFire Lite not AngularFire2 ?

AngularFire Lite is the very first and currently the only library that supports server side rendering out of the box for both Firestore and the Realtime Database plus other features over the Angularfire2 library like Storage , Observable based Transactions & Batched Writes and Cloud Messaging.

Quick story about the name: it was called “AngularFire Lite” simply because it is around 50% lighter than Angularfire2 and unlike the confusing 2 number in the name of the official library it chose simply to match the Angular versions so it’s currently in version 5.

take a look at the library repo to get started: Here

Guide

Step 1: Install decencies and generate a new Angular CLI project:

reminder: install nodejs from here and the Angular CLI using this command:

npm i @angluar/cli

then generate a new project:

ng new AngularFireLiteSSR

finally install the following decencies which we are going to use for server side rendering:

npm i @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader

Step 2: Install AngularFire Lite and Firebase:

change directory to the project directory and install both packages : Angularfire Lite and Firebase

cd AngularFireLiteSSR
npm i angularfire-lite firebase

Step 3: Create a new Firebase project and get its credentials

open your browser and navigate to : https://console.firebase.google.com

click `Add Project` write your project name and then `Create Project`:

then to get your project credentials click `Add Firebase to your web app`

copy only the config object

Step 4: Save Firebase credentials in your Angular project

open the file called environment.prod.ts in your favorite editor of choice located under src/environments/environment.ts and paste that config object we got from the Firebase console inside your environment object and do the same for the file called enviroment.ts:

Step 5: Setup AngularFire Lite and Universal compatibility

Open your root module which is called app.module.ts and import AngularFireLite and pass it the config object we store in the environment file.

To make the AppModule Universal compatible we should call the BrowserModule.withServerTransition and pass it an appId of your choice so your module looks just like this:

Step 6: Creating the server module and exporting it

Create a new module inside src/app and call it app.server.module.ts and it should import your core module followed by the ServerModule from the @angular/platform-server package (order is important).

We added the Map Loader Module here to support lazy loading module on the server side.

⚠️ it’s important to import ServerTransferStateModule as it’s required by AngularFire Lite to do its magic which offers us a flicker free transition when the Angular app bootstraps. Freaking Awesome!! 😮 👌

to export the server module create a new file called main.server.ts inside your /src folder and just add the following export statement:

Step 7: creating a tsconfig for the Universal bundle

Simply copy the tsconfig file that the Angular CLI generates called tsconfig.app.json located in your /src folder and name the new file tsconfig.server.json

We only need to do a couple of things here

  • change the module target: from es2015 to commonjs which node will use.
  • add the angularcompilerOptions to tell the compiler about its entry module which is the AppServerModule and here we use the hash symbol in the path to reach the actual class.

Step 8: Configure the Angular CLI to build our server side App

Open the file called .angular-cli.json located in the root of your project which is the file that configures the Angular CLI and how it builds our app.

However, if you take a look at the apps array you will only see when entry inside it which tells the Angular CLI how to build our client side app when you simply run ng build .

We need add a new object to the apps array to tell the Angular CLI how to compile our server side app. So your apps array should look something like this:

in the first entry, we need just to modify the outDir to dist/browser so it will store our client side app bundle there.

in the second app entry we give it a name ssr then we tell the CLI that the platform we are targeting is the server and our Universal bundle should appear under dist/server . We also point it to the tsconfig we created for the server and the main server file.

Step 9: Spinning up an Express Server and Using Webpack

I won’t go here into details but basically here we are creating an express server to serve our server side app locally.

So create a server.ts file in the root of your project file and a webpack.server.config.js to package the ts file using the ts-loader we installed earlier

server.ts file:

webpack.server.config.js file:

Step 10: NPM script to bundle and serve the app

now all we have to do is just add an npm script to save us the time of writing a long command to build our app using the CLI , pack our server.ts file using Webpack and finally run it with node

inside your package.json file add the following command to your scripts object:

"universal": "ng build --prod && ng build --prod --app ssr --output-hashing=false && webpack --config webpack.server.config.js --progress --colors && node dist/server.js"

finally using AngularFire Lite

we are just going to do something simple in here just print some data from Firestore in header tag but stay tuned as I am going to release new step by step guide to build production ready beautiful apps with AngularFire Lite and if you don’t want to miss those valuable tutorials you can subscribe in here.

if you add document under and name it `hello` with a field called `firestore` and a value `Hello Firestore from AngularFire Lite`

you can retrieve it simply in you app.component.ts by doing the following:

  • you import AngularFireLiteFirestore and you inject it in the constructor
  • you reference it in you ngOnInt lifecycle hook and call the read method
  • finally, subscribe in the component or the template using the async pipe to retrieve the data

here an example of using multiple features of the AngularFire Lite library which includes the Realtime Database, Firestore (reads and batched writes) and authentication (just remember to set your read and write permissions in your Firebase dashboard to true just for testing only).

and here is the template:

Enjoy Server Side Goodness! 😮

Now all you have to do is just to run

npm run universal

then open http://localhost:5000/ and your data should appear as you store it in your Realtime Database or Firestore and the cool thing is when you hit view source you can see the actual HTML displayed just like this:

you can now enjoy :

🔎 SEO benefits and social media thumbnails on shared content

😎📃 Faster loading time* (first render / first meaningful paint)

Feeling lazy? clone the AngularFire Lite demo repo

If you are feeling a little lazy you can clone the AngularFire Lite demo from Github by visiting the repo: Here

What about rendering with Firebase Cloud Functions and firebase hosting?

This article is one of a series of articles and I will definitely cover that but I just wanted to start with core principles of server side rendering and demonstrating that AngularFire Lite actually let Angular Universal renders our HTML using the data stored on the Firebase realtime database or firestore unlike Angularfire2 which throws an error. More to come in the rest of the articles so you better don’t miss those by subscribing here to get notified.

Your thoughts matter!!

Either you like this guide or hate it please tell me in the comments section below I love to hear from you and if you would like to follow me I am everywhere trying to bring value to everyone:

on Github:

on Stackoverflow:

on Behance:

on 500px:

if you don’t want to miss any upcoming guides like this you can subscribe in here and you will get notified once a new guide will be released. See you soon!