Angular Universal On Firebase Hosting: A Tutorial

 Angular universal on firebase hosting

In this Angular Tutorial, I’ll tell you how you can make you a normal Angular app to support Server-side rendering using angular universal and deploy it on firebase hosting with firebase functions

I am assuming you already have an angular project

First, you have to Add angular universal support to your Angular application for that we will run one cmd Note you can find your project name in angular.json in your root folder

Once it is done you will see numerous changes in your project to know more about this transition visit Angular universal official

ng add @nguniversal/express-engine --clientProject <project name>

 Angular universal on firebase hosting

Next step is to make some changes in your server.ts 1. ) you need to add export in front of app variable

 Angular universal on firebase hosting

2. ) You need to comment the listening of your app which is typically at the end of server .ts file

 Angular universal on firebase hosting

Now you need to export your app as a library with a library target as umd in webpack configuration typically its name is webpack.server.config.js

output: { path: path.join(__dirname, 'dist'), library:'app', libraryTarget:'umd', filename: '[name].js' }

 Angular universal on firebase hosting

1.) First need to install firebase tools then we need to login into firebase from our cli

npm g firebase-tools once the above cmd successes run firebase login

 Angular universal on firebase hosting

2.) Then we will initialize firebase functions a firebase hosting in our project note while initializing firebase function choose typescript as your language

firebase init

 Angular universal on firebase hosting Angular universal on firebase hosting Angular universal on firebase hosting

Once you have firebase in your angular project we need to make some changes in our firebase.json file (it will a new file created after firebase init)

 Angular universal on firebase hosting

We need to change the rewrite property in it

"function": "angularUniversalFunction"

 Angular universal on firebase hosting

The above cmd will generate a dist folder which have3 things in it a browser folder a server folder and server.js file

npm run build:ssr

 Angular universal on firebase hosting

We need to somehow copy the build folder from the root project to the functions folder for that we will use fs-extra package so

npm i --save fs-extra

After this cmd, we will create one file and name it as movedist.js and the content will be

const fs = require('fs-extra'); ( async()=>{ const src = './dist'; const dist = './functions/dist'; await fs.remove(dist); await fs.copy(src,dist); } )()

This function will copy the dist from the root and paste it in functions folder

In this step, we need to configure our main firebase function which is in functions folder src directory the filename is index.ts

import * as functions from 'firebase-functions'; const universal = require(`${process.cwd()}/dist/server`).app; export const angularUniversalFunction = functions.https.onRequest(universal);
rebuild your project npm run build:ssr node movedist.js cd functions firebase deploy

We, Will, create a script in our root folder which will take care of running all the scripts together it will look like So that’s all I have for this article let me know if you face any issues

"firedeploy": "npm run build:ssr && node movedist.js && cd functions && firebase deploy",

 Angular universal on firebase hosting

Originally published at

Angular Universal On Firebase Hosting: A Tutorial was originally published in Hacker Noon on Medium, where people are continuing the conversation by highlighting and responding to this story.

Publication date: 
04/17/2019 - 02:11

The views and opinions expressed in this article are solely those of the authors and do not reflect the views of Bitcoin Insider. Every investment and trading move involves risk - this is especially true for cryptocurrencies given their volatility. We strongly advise our readers to conduct their own research when making a decision.