Angular Tutorial: Angular universal on firebase hosting

In this Angular Tutorial, ill tell you how you can make your standard 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

Step 1: Add Angular Universal

First, you have to Add universal angular 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

ng add 
 --clientProject <project name>

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

Step 2: Make changes in server.ts

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

Step 3: Export your app as Library

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

Step 4: Initialize and configure firebase

in this step, we first need to install firebase tools

then we need to login into firebase from our cli

and then we will initialize firebase functions a firebase hosting in our project

note while initializing firebase function choose typescript as your language

npm g firebse-tools
once the above cmd successds

firebase login

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"

step 5: Build your project

npm run build:ssr

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

Step 6: Automate the build folder movement

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

Visit Smartcodehub

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

step 7: configure our primary firebase function

in this step, we need to set our primary 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);

step 8: deploy the firebase function

rebuild your project

 node movedist.js
 ```

 cd functions
 firebase deploy

Thas it Visits [Smartcodehub](https://www.smartcodehub.com/#)


A Passionate developer with 6 years of hands-on experience and a man behind
Smartcodehub Visit [https://www.smartcodehub.com](https://www.smartcodehub.com/)

Tags

• Angular
• firebase