[next] Production Usage (#1808)

* feat: docker + compression support + headers

* fixed bug with dependancies

src/core/build/createWebpackConfig.ts

@@ -1,4 +1,5 @@
 import CaseSensitivePathsPlugin from "case-sensitive-paths-webpack-plugin";
+import CompressionPlugin from "compression-webpack-plugin";
 import HtmlWebpackPlugin, { Options } from "html-webpack-plugin";
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
 import path from "path";
@@ -111,6 +112,8 @@ export default function createWebpackConfig({
           filename: "assets/css/[name].[hash].css",
           chunkFilename: "assets/css/[id].[hash].css",
         }),
+        // Pre-compress all the assets as they will be served as is.
+        new CompressionPlugin({}),
       ]
     : [
         // Add module names to factory functions so they appear in browser profiler.

src/core/server/app/index.ts

@@ -14,6 +14,7 @@ import { handleSubscriptions } from "talk-server/graph/common/subscriptions/midd
 import { Schemas } from "talk-server/graph/schemas";
 import TenantCache from "talk-server/services/tenant/cache";
 
+import { cacheHeadersMiddleware } from "talk-server/app/middleware/cacheHeaders";
 import { errorHandler } from "talk-server/app/middleware/error";
 import { accessLogger, errorLogger } from "./middleware/logging";
 import serveStatic from "./middleware/serveStatic";
@@ -47,13 +48,14 @@ export async function createApp(options: AppOptions): Promise<Express> {
 
   // Mount the router.
   parent.use(
+    "/",
     await createRouter(options, {
       passport,
     })
   );
 
   // Static Files
-  parent.use("/assets", serveStatic);
+  parent.use("/assets", cacheHeadersMiddleware("1w"), serveStatic);
 
   // Error Handling
   parent.use(notFoundMiddleware);

src/core/server/app/middleware/cacheHeaders.ts

@@ -0,0 +1,27 @@
+import { RequestHandler } from "express";
+import ms from "ms";
+
+export const nocacheMiddleware: RequestHandler = (req, res, next) => {
+  // Set cache control headers to prevent browsers/cdn's from caching these
+  // requests.
+  res.set({ "Cache-Control": "no-cache, no-store, must-revalidate" });
+
+  next();
+};
+
+export const cacheHeadersMiddleware = (duration: string): RequestHandler => {
+  const maxAge = duration ? Math.floor(ms(duration) / 1000) : false;
+  if (!maxAge) {
+    return nocacheMiddleware;
+  }
+
+  return (req, res, next) => {
+    // Set cache control headers to encourage browsers/cdn's to cache these
+    // requests if we aren't in private mode.
+    res.set({
+      "Cache-Control": `public, max-age=${maxAge}`,
+    });
+
+    next();
+  };
+};

src/core/server/app/router.ts

@@ -13,6 +13,10 @@ import tenantMiddleware from "talk-server/app/middleware/tenant";
 import managementGraphMiddleware from "talk-server/graph/management/middleware";
 import tenantGraphMiddleware from "talk-server/graph/tenant/middleware";
 
+import {
+  cacheHeadersMiddleware,
+  nocacheMiddleware,
+} from "talk-server/app/middleware/cacheHeaders";
 import { AppOptions } from "./index";
 import playground from "./middleware/playground";
 
@@ -123,7 +127,7 @@ export async function createRouter(app: AppOptions, options: RouterOptions) {
   // Create a router.
   const router = express.Router();
 
-  router.use("/api", await createAPIRouter(app, options));
+  router.use("/api", nocacheMiddleware, await createAPIRouter(app, options));
 
   if (app.config.get("env") === "development") {
     // Tenant GraphiQL
@@ -146,7 +150,7 @@ export async function createRouter(app: AppOptions, options: RouterOptions) {
   }
 
   // Handle the stream handler.
-  router.get("/embed/stream", streamHandler);
+  router.get("/embed/stream", cacheHeadersMiddleware("1h"), streamHandler);
 
   return router;
 }