82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
/**
|
|
* Serving the built frontend: static files, and `index.html` with its
|
|
* placeholders filled for every client-side route.
|
|
*
|
|
* @module
|
|
*/
|
|
|
|
import { Context, Next, send } from "@oak/oak";
|
|
import { loadIndexHtml } from "./index-html.ts";
|
|
|
|
/** Answers with the filled `index.html` of `root`, always revalidated. */
|
|
async function serveIndexHtml(
|
|
context: Context<Record<string, object>>,
|
|
root: string,
|
|
) {
|
|
const html = await loadIndexHtml(root);
|
|
context.response.type = "text/html";
|
|
// Always revalidated: it names the hashed chunks of the current build.
|
|
context.response.headers.set("Cache-Control", "no-cache");
|
|
context.response.body = html;
|
|
}
|
|
|
|
/**
|
|
* Build output whose URL changes whenever its content does: Vite's hashed
|
|
* chunks, and the emoji data under its package version (see vite.config.ts).
|
|
*/
|
|
const IMMUTABLE_PREFIXES = ["/assets/", "/emojibase/"];
|
|
const ONE_YEAR_MS = 365 * 24 * 60 * 60 * 1000;
|
|
|
|
/**
|
|
* Returns a middleware serving static files from the first of `staticPaths`
|
|
* that has them, and `index.html` from the first for any other path so
|
|
* client-side routes load on direct navigation. Hashed build output is cached
|
|
* for a year, and a missing chunk is a 404.
|
|
*/
|
|
export function routeStaticFilesFrom(
|
|
staticPaths: string[],
|
|
): (context: Context<Record<string, object>>, next: Next) => Promise<void> {
|
|
return async (context: Context<Record<string, object>>, next: Next) => {
|
|
const pathname = context.request.url.pathname;
|
|
|
|
// Serve index.html with runtime placeholder replacement
|
|
if (pathname === "/" || pathname === "/index.html") {
|
|
await serveIndexHtml(context, staticPaths[0]);
|
|
return;
|
|
}
|
|
|
|
const immutable = IMMUTABLE_PREFIXES.some((prefix) =>
|
|
pathname.startsWith(prefix)
|
|
);
|
|
// A request without Accept-Encoding technically accepts any coding (RFC
|
|
// 9110), but in practice it's curl or a bot that can't decode brotli.
|
|
const compress = context.request.headers.has("accept-encoding");
|
|
for (const path of staticPaths) {
|
|
try {
|
|
// send() picks a prebuilt .br or .gz sibling when the browser accepts it.
|
|
await send(context, pathname, {
|
|
root: path,
|
|
brotli: compress,
|
|
gzip: compress,
|
|
...(immutable && { maxage: ONE_YEAR_MS, immutable: true }),
|
|
});
|
|
context.response.headers.append("Vary", "Accept-Encoding");
|
|
return;
|
|
} catch {
|
|
continue;
|
|
}
|
|
}
|
|
|
|
// A chunk from an older build (an open tab after a deploy) must fail as a
|
|
// 404, not load index.html as a script; the app reloads on that failure.
|
|
if (immutable) {
|
|
context.response.status = 404;
|
|
return;
|
|
}
|
|
|
|
// SPA fallback: serve index.html so client-side routes work on direct navigation
|
|
await serveIndexHtml(context, staticPaths[0]);
|
|
await next();
|
|
};
|
|
}
|