Angular Universal On Firebase Hosting: A Tutorial

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>

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

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

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' }

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

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

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)

We need to change the rewrite property in it

"function": "angularUniversalFunction"

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

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",

Originally published at www.smartcodehub.com.

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.