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 = ;exportstrigger = angularUniversal;
TypeScript usage
;;
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 = ;exportstrigger = angularUniversal;
firebase.json
Setup the rewrite in Firebase Hosting needs to know which Cloud Function to call.
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 deployfirebase open hosting:site # automatically opens default browser to the prod site