add static content serving from server

.gitignore

@@ -1,3 +1,4 @@
+/public/
+/out/
 node_modules/
-out/
 .env

package.json

@@ -5,6 +5,7 @@
   "description": "Keep on top of it all with Herda",
   "scripts": {
     "build": "tsc",
+    "build-statics": "cd web && npm run build -- --outDir ../public",
     "dev": "nodemon --watch src -e ts --exec 'ts-node src/index.ts'",
     "lint": "eslint --ext .ts src",
     "start": "node out/index.js",

src/http.ts

@@ -9,7 +9,7 @@ import { version } from '../package.json'
 import type { ErrorRequestHandler, RequestHandler } from 'express'
 
 /** Create an Express application. */
-function createExpress(ctx: Context) {
+function createExpress(ctx: Context, staticsPath?: string) {
   // Initialize app with JSON, CORS, and auth middleware
   const app = express()
   app.use(express.json())
@@ -18,6 +18,9 @@ function createExpress(ctx: Context) {
 
   const prefix = ctx.config.api.prefix
 
+  // Static frontend
+  if (staticsPath) app.use(express.static(staticsPath, { fallthrough: true }))
+
   // Misc APIs
   app.get(prefix, index)
 
@@ -49,6 +52,15 @@ function createExpress(ctx: Context) {
   // Authentication APIs
   app.post(`${prefix}/login/account`, account.loginAccount(ctx))
 
+  // Static fallback to route to index.html
+  if (staticsPath) app.get('/*', (req, res, next) => {
+    if (!res.headersSent) {
+      res.sendFile(`${staticsPath}/index.html`, err => {
+        next(err)
+      })
+    } else next()
+  })
+
   // Add middleware to handle any errors forwarded from previous handlers via `next(err)`
   const catchError: ErrorRequestHandler = (err, req, res, next) => {
     if (!res.headersSent) {

src/index.ts

@@ -1,6 +1,7 @@
 import crypto from 'crypto'
 import dotenv from 'dotenv'
 import main from './main'
+import path from 'path'
 
 dotenv.config()
 
@@ -33,6 +34,9 @@ main({
     },
   },
   cors: undefined,
+  fs: {
+    root: path.dirname(__dirname),
+  },
   http: {
     host: process.env.HTTP_HOST || '',
     port: parseInt(process.env.HTTP_PORT || '5001'),

src/main.ts

@@ -3,6 +3,7 @@ import createAuth from './auth'
 import createDatabase from './db'
 import createExpress from './http'
 import createLogger from './log'
+import fs from 'fs/promises'
 import process from 'process'
 import type { Config, Context } from './types'
 
@@ -28,7 +29,18 @@ async function main(config: Config): Promise<void> {
   log.info('Connected to MongoDB', config.mongo)
 
   // Initialize Express app
-  const app = createExpress(ctx)
+  let staticsPath: string | undefined = `${ctx.config.fs.root}/public`
+  try {
+    const stat = await fs.stat(staticsPath)
+    if (!stat.isDirectory()) {
+      ctx.log.warn(`Statics path ${staticsPath} is not a directory, not serving static assets`)
+      staticsPath = undefined
+    }
+  } catch (err) {
+    ctx.log.warn(`Statics path ${staticsPath} not found, not serving static assets`)
+    staticsPath = undefined
+  }
+  const app = createExpress(ctx, staticsPath)
 
   // Start processes.
   // This promise can only be rejected, signifying that the app has stopped

src/types.ts

@@ -29,6 +29,13 @@ export interface Config {
    * @see https://www.npmjs.com/package/cors#usage
    */
   cors: Parameters<typeof cors>[0]
+  fs: {
+    /**
+     * Filesystem root directory (AKA location of package.json).
+     * This is detected at startup and not configurable.
+     */
+    root: string
+  }
   http: {
     /** HTTP bind host (default: empty) */
     host: string