markgoho/angular-universal-express-firebase

A packaged Cloud Function to serve Angular Universal apps.

Angular Universal Express Firebase

A packaged Cloud Function to serve Angular Universal apps.

Install

npm i angular-universal-express-firebase

Basic Usage

const angularUniversal = require('angular-universal-firebase-hosting');
exports.trigger = angularUniversal.trigger({
  index: 'path/to/index.html',
  main: 'path/to/bundle.longhash',
  enableProdMode: true,
  cdnCacheExpiry: 600,
  browserCacheExpiry: 300,
  staleWhileRevalidate: 120
});

TypeScript usage

import * as angularUniversal from 'angular-universal-firebase-hosting';
export let trigger = angularUniversal.trigger({
  index: 'path/to/index.html',
  main: 'path/to/bundle.longhash',
  enableProdMode: true,
  cdnCacheExpiry: 600,
  browserCacheExpiry: 300,
  staleWhileRevalidate: 120  
});

Setup

There are two parts to an Angular Universal app: the server build and the server.

Server Build

The current RC version of the Angular CLI covers the server build. Follow these steps to setup the CLI to get a server build.

Cloud Functions as the server

Build both browser and server Angular builds

At this point you should have two app entries in your angularcli.json file: browser and server. The browser build writes to the dist folder and the server build writes to the dist-server folder.

Delete dist/index.html.

This index file is uneeded because Angular Universal uses the assets in dist-server to generate the initial HTML.

Install the Firebase CLI.

# npm
npm i firebase-tools -g
# yarn
yarn add firebase-tools --global

Initialize Firebase Hosting and Cloud Functions.

firebase init hosting
# specify the public directory to dist
firebase init functions
# this will create a functions folder 
# with and index.js, package.json, and set
# of node_modules

Open functions/index.js and add the following code.

const angularUniversal = require('angular-universal-firebase-hosting');
exports.trigger = angularUniversal.trigger({
  index: __dirname + 'dist-server/index.html',
  main: __dirname + '/bundle.<generated-hash>', // make sure this points at the correct hash
  enableProdMode: true,
  cdnCacheExpiry: 600, // cache in the CDN for 10 minutes
  browserCacheExpiry: 300, // cache in the browser for 5 minutes
  staleWhileRevalidate: 120 // serve a stale version for 2 minutes after cdnCacheExpiry, but refresh CDN in background
});

Setup the rewrite in firebase.json

Firebase Hosting needs to know which Cloud Function to call.

{
  "hosting": {
    "rewrites": [
      {
        "source": "**",
        "function": "trigger"
      }
    ]
  }
}

Serve locally to test

The Firebase CLI allows you to serve locally and emulate the production environment.

firebase serve --only functions,hosting
# visit locahost:5000

Deploy

Now that it looks great locally, deploy to production.

firebase deploy
firebase open hosting:site 
# automatically opens default browser to the prod site