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
-
) you need to add export in front of app variable
-
) 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/)