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

Hamed Baatour
Dec 31, 2017 · 7 min read
Image for post
Image for post

Intro

Why AngularFire Lite not AngularFire2 ?

Image for post
Image for post

Guide

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

npm i @angluar/cli
ng new AngularFireLiteSSR
npm i @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader

Step 2: Install AngularFire Lite and Firebase:

cd AngularFireLiteSSRnpm i angularfire-lite firebase

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

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Step 4: Save Firebase credentials in your Angular project

Step 5: Setup AngularFire Lite and Universal compatibility

Step 6: Creating the server module and exporting it

Step 7: creating a tsconfig for the Universal bundle

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

Step 9: Spinning up an Express Server and Using Webpack

Step 10: NPM script to bundle and serve the app

"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

Enjoy Server Side Goodness! 😮

npm run universal
Image for post
Image for post

Feeling lazy? clone the AngularFire Lite demo repo

What about rendering with Firebase Cloud Functions and firebase hosting?

Best courses to invest in — fastest path to Fullstack

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

ES6 For Everyone: Master Modern JS skills



Learn to build applications and APIs with Node.js

Become an Angular Master

Image for post
Image for post

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store