Angular Universal Firebase Deployment in Cloud Function

Image for post
Image for post

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

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

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.

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.

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

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

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

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

functions/cp-angular.js

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

functions/package.json

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.

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.

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

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.

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.

I am Full Stack Developer and Data Scientist, I have worked some of the biggest client’s project (eg. Walmart, Cisco, Uber, Apple, JP Morgan, Capital One etc).

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store