Add staticFileMiddleware.ts

server/index.ts

@@ -12,9 +12,13 @@ app.use(middleware.errorMiddleware)
 app.use(middleware.loggerMiddleware)
 app.use(middleware.corsMiddleware)
 
+app.use(middleware.staticFileMiddleware)
+
 app.use(routes.api.routes())
 app.use(routes.api.allowedMethods())
 
+// This middleware should be the last one to handle SPA routing in case the
+// requested file does not exist
 app.use(middleware.spaRoutingMiddleware)
 
 const port = parseInt(env.PORT ?? '3000')

server/middleware/index.ts

@@ -2,3 +2,4 @@ export { corsMiddleware } from './corsMiddleware.ts'
 export { errorMiddleware } from './errorMiddleware.ts'
 export { loggerMiddleware } from './loggerMiddleware.ts'
 export { spaRoutingMiddleware } from './spaRoutingMiddleware.ts'
+export { staticFileMiddleware } from './staticFileMiddleware.ts'

server/middleware/staticFileMiddleware.ts

@@ -0,0 +1,20 @@
+import { Context, Next, send } from '@oak/oak'
+
+// Middleware to handle static file requests
+export const staticFileMiddleware = async (ctx: Context, next: Next) => {
+  const { request, response } = ctx
+  const path = request.url.pathname
+
+  if (path.startsWith('/assets')) {
+    try {
+      await send(ctx, path, {
+        root: './dist',
+      })
+    } catch (error) {
+      response.status = error.status ?? 500
+      response.body = error.message ?? 'Internal Server Error'
+    }
+  } else {
+    await next()
+  }
+}