compute servrer: serve actual cocalc frontend app code.

- also found a cache header bug in hub express server (only impacts
  cocalc-docker so not a real issue).

src/compute/compute/lib/http-server.ts

@@ -7,9 +7,14 @@ import express from "express";
 import { createServer } from "http";
 import { getLogger } from "@cocalc/backend/logger";
 import type { Manager } from "./manager";
+import { path as STATIC_PATH } from "@cocalc/static";
+import { join } from "path";
+import { cacheShortTerm, cacheLongTerm } from "@cocalc/util/http-caching";
 
 const logger = getLogger("compute:http-server");
 
+const ENTRY_POINT = "app.html";
+
 export function initHttpServer({
  port = 5004,
  host = "localhost",
@@ -26,9 +31,22 @@ export function initHttpServer({
 
  app.get("/", (_req, res) => {
  const files = manager.getOpenFiles();
- res.send(`<h1>Compute Server</h1> Open Files: ${files.join(", ")}`);
+ res.send(
+ `<h1>Compute Server</h1> <a href="${join("/static", ENTRY_POINT)}">CoCalc App</a> <br/><br/> Open Files: ${files.join(", ")}`,
+ );
  });
 
+ app.use(
+ join("/static", ENTRY_POINT),
+ express.static(join(STATIC_PATH, ENTRY_POINT), {
+ setHeaders: cacheShortTerm,
+ }),
+ );
+ app.use(
+ "/static",
+ express.static(STATIC_PATH, { setHeaders: cacheLongTerm }),
+ );
+
  server.listen(port, host, () => {
  logger.info(`Server listening http://${host}:${port}`);
  });

src/compute/compute/package.json

@@ -32,11 +32,13 @@
  "@cocalc/backend": "workspace:*",
  "@cocalc/compute": "link:",
  "@cocalc/jupyter": "workspace:*",
+ "@cocalc/static": "workspace:*",
  "@cocalc/sync": "workspace:*",
  "@cocalc/sync-client": "workspace:*",
  "@cocalc/sync-fs": "workspace:*",
  "@cocalc/terminal": "workspace:*",
  "@cocalc/util": "workspace:*",
+ "@types/ms": "^0.7.34",
  "@types/ws": "^8.5.9",
  "awaiting": "^3.0.0",
  "cookie": "^1.0.0",

src/compute/pnpm-workspace.yaml

@@ -9,3 +9,4 @@ packages:
  - "util"
  - "terminal"
  - "compute"
+ - "static"

src/packages/hub/servers/express-app.ts

@@ -5,7 +5,6 @@ The main hub express app.
 import compression from "compression";
 import cookieParser from "cookie-parser";
 import express from "express";
-import ms from "ms";
 import { join } from "path";
 import { parse as parseURL } from "url";
 import webpackDevMiddleware from "webpack-dev-middleware";
@@ -32,10 +31,7 @@ import initStripeWebhook from "./app/webhooks/stripe";
 import { database } from "./database";
 import initHttpServer from "./http";
 import initRobots from "./robots";
-
-// Used for longterm caching of files. This should be in units of seconds.
-const MAX_AGE = Math.round(ms("10 days") / 1000);
-const SHORT_AGE = Math.round(ms("10 seconds") / 1000);
+import { cacheShortTerm, cacheLongTerm } from "@cocalc/util/http-caching";
 
 interface Options {
  projectControl;
@@ -166,30 +162,6 @@ export default async function init(opts: Options): Promise<{
  return { httpServer, router };
 }
 
-function cacheShortTerm(res) {
- res.setHeader(
- "Cache-Control",
- `public, max-age=${SHORT_AGE}, must-revalidate`,
- );
- res.setHeader(
- "Expires",
- new Date(Date.now().valueOf() + SHORT_AGE).toUTCString(),
- );
-}
-
-// Various files such as the webpack static content should be cached long-term,
-// and we use this function to set appropriate headers at various points below.
-function cacheLongTerm(res) {
- res.setHeader(
- "Cache-Control",
- `public, max-age=${MAX_AGE}, must-revalidate'`,
- );
- res.setHeader(
- "Expires",
- new Date(Date.now().valueOf() + MAX_AGE).toUTCString(),
- );
-}
-
 async function initStatic(router) {
  let compiler: any = null;
  if (
@@ -215,7 +187,7 @@ async function initStatic(router) {
  router.use("/static", webpackHotMiddleware(compiler, {}));
  } else {
  router.use(
- join("/static", STATIC_PATH, "app.html"),
+ join("/static", "app.html"),
  express.static(join(STATIC_PATH, "app.html"), {
  setHeaders: cacheShortTerm,
  }),

src/packages/util/http-caching.ts

@@ -0,0 +1,33 @@
+/*
+Helper functions for caching static files when using express
+*/
+
+import ms from "ms";
+
+// Used for longterm caching of files. This should be in units of seconds.
+const MAX_AGE = Math.round(ms("10 days") / 1000);
+const SHORT_AGE = Math.round(ms("10 seconds") / 1000);
+
+export function cacheShortTerm(res) {
+ res.setHeader(
+ "Cache-Control",
+ `public, max-age=${SHORT_AGE}, must-revalidate`,
+ );
+ res.setHeader(
+ "Expires",
+ new Date(Date.now().valueOf() + SHORT_AGE).toUTCString(),
+ );
+}
+
+// Various files such as the webpack static content should be cached long-term,
+// and we use this function to set appropriate headers at various points below.
+export function cacheLongTerm(res) {
+ res.setHeader(
+ "Cache-Control",
+ `public, max-age=${MAX_AGE}, must-revalidate'`,
+ );
+ res.setHeader(
+ "Expires",
+ new Date(Date.now().valueOf() + MAX_AGE).toUTCString(),
+ );
+}