Angular Universal Express Firebase
A packaged Cloud Function to serve Angular Universal apps.
Install
npm i angular-universal-express-firebase
NB: Run this command afer initialzing functions and from within the functions
folder
Basic Usage
const angularUniversal = require('angular-universal-express-firebase');
exports.trigger = angularUniversal.trigger({
index: 'path/to/index.html',
main: 'path/to/bundle.longhash',
enableProdMode: true,
cdnCacheExpiry: 600,
browserCacheExpiry: 300,
staleWhileRevalidate: 120
extraProviders: [
provideModuleMap(LAZY_MODULE_MAP)
]
});
TypeScript usage
import * as angularUniversal from 'angular-universal-express-firebase';
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
You may want to use the --output-hashing none
flag with your universal build to avoid needing to change the hash
with each build in your function.js. 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.
dist/index.html
.
Delete 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
functions/index.js
and add the following code.
Open const angularUniversal = require('angular-universal-express-firebase');
exports.trigger = angularUniversal.trigger({
index: __dirname + 'dist-server/index.html',
// make sure this points at the correct hash, or use the --output-hashing none flag on your ng build.
main: __dirname + '/bundle.<generated-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
});
firebase.json
Setup the rewrite in 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