Angular Universal Firebase Deployment in Cloud Function

Angular 9 comes with some extended features and gives a better performance than Angular8, Some of the features like Small chunks, Faster Tree Shaking, by default Ivy and AOT support, a new updated Service worker etc. But when it comes to load the application faster and to get visibility in Search Engine then we need to implement the Angular Universal or Angular Server Side rendering so that we will get faster initial loading because it loads the initial route from Sever side and in response we will get a generated HTML and we can see the page pretty instantly and client side JavaScript will be parsed in the background.

So to create Angular universal there are couple of mechanism and third party dependency available and among them below are two most common ways to create Angular SSR application

1. Angular Universal From Angular Team
2. Angular Universal From Nest JS Team (Deployment with Firebase Update Soon)

So we will discuss about the first point in here that Angular Universal from Angular Team.

So to create an Angular application with SSR please give this command

npm i -g @angular/cli
ng new projectName  — routing
ng add @nguniversal/express-engine

After doing those steps you can create Angular Universal Application, now let create a module with component name home with lazy loading routing.

ng generate module home — route home — module app.module

So it will create home module(home.module.ts) with home component (home.component.ts) and with home routing (home-routing.module.ts). After creating home module let add dynamic meta tag and meta description in home.component.ts file like below.

ngOnInit(): void {
this.addMetaTags();
}
addMetaTags() {
this.title.setTitle(‘Home Page’);
this.meta.addTags([
{ name: ‘title’, content: ‘Home Page’ },
{ name: ‘description’, content: ‘This is Home Page Descrition’},
{ name: ‘twitter:card’, content: ‘Home Page’},
{ name: ‘og:url’, content: ‘/home’ },
{ name: ‘og:title’, content: ‘Home Page’ },
{ name: ‘og:description’, content: ‘This is Home Page Descrition’ },
{ name: ‘og:image’, content: ‘/assets/images/home-meta.jpg’ }
]);
}

So we have added a sample meta tags for home page, so now let create Firebase cloud functions project in our project.

First install the Firebase tools which is needed to create a cloud function project.

npm install -g firebase-tools

So it will install the firebase tools globally and then gives this below command to create a cloud function project in your project directory.

firebase init

# select hosting, functions

Now make your public folder dist/browser, but rewrite all traffic to a functions, So your firebase.json file look like this given below.

{
  "hosting": {
    "public": "dist/browser",
     // ...
    "rewrites": [
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  }
}

Copy the Angular production App (dist Folder) to the Function Environment and to do so please follow below steps

cd functions
npm i fs-extra

create a file name cp-angular.js in your functions directory and then add this code to this file.

functions/cp-angular.js

const fs = require('fs-extra');

(async() => {

    const src = '../dist';
    const copy = './dist';

    await fs.remove(copy);
    await fs.copy(src, copy);

})();

Change the build command for the functions in package.json file

functions/package.json

{
  "name": "functions",
  "engines": {
    "node": "8"
  },
  "scripts": {
    "build": "node cp-angular && tsc"
  }
}

The function itself only needs to import the universal app into the current working directory. That’s why we need to copy it to the function’s environment.

import * as functions from 'firebase-functions';
const universal = require(`${process.cwd()}/dist/server`).app();

export const ssr = functions.https.onRequest(universal);

So write now export the express app function from server.ts file, so go to the server.ts file in root directory and add export which is given below.

function app() // replace it with below line
export function app()

After that no lets add a function build command in your root directory package.json file. So go to src/package.json file and add this lines

"build:functions": "npm run --prefix functions build" // add 
"build:all": "npm run build:ssr && npm run build:functions" // add

So we have added the build command for Server side rendering and as well as for function build. So we are done with all off the setting and now it is time to build and deploy. So to build and deploy in cloud function give this below command.

npm run build:all // build command for SSR and Functions
firebase server // test in local (optional)
firebase deploy // to deploy in Cloud function

So now Angular universal app deployed to test it go to the url and click on view source and you can see the meta tag details. So this is complete and easy process to deploy Angular Universal Server Side Rendering application in cloud function.