Express Application on Firebase Hosting

This is a short followup to Nx Nrwl Firebase Function article. It explains how to setup Firebase Hosting and Functions to host Node Application that serves an Angular App on Firebase Hosting.

Setting firebase.json

Edit firebase.json:

{
  ...
  },
  "hosting": {
    "public": "dist/apps/web-app",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "function": "server"
      }
    ]
  }
}

• public — it is a path to your compiled angular application
• rewrites — it tells to redirect all request to Firebase Function called “server”

Setting package.json

Modify package.json script:

"firebase:serve": "concurrently --kill-others \"yarn run build functions --watch\" \"firebase serve --only functions,hosting\"",

Setting functions

In the Firebase Functions main file ( apps/function/src/main.ts) add:

import * as express from 'express';
import * as functions from 'firebase-functions';
import * as path from 'path';

const app = express();
app.use(express.static('/../web-app'));
app.get('*', (req, res) => res.sendFile(path.join(__dirname, '/../web-app/index.html')));

export const server = functions.https.onRequest(app);

Summary

This covers simple scenario of having Node application serve Angular app. David may provide a more detailed explanation in this video.