fix(storybook): serve storybook on dev environments

Co-authored-by: chris <[email protected]>

docker.sh

@@ -93,7 +93,6 @@ case $1 in
         APP_IMAGE_TAG=$APP_IMAGE
 
         npm run build
-        npm run build:storybook
         echo "Building $APP_IMAGE..."
         docker build -t $APP_IMAGE --label "hash=$LATEST_GIT_TAG" -f $DOCKERFILE --target app --quiet .
 

package.json

@@ -14,8 +14,8 @@
     "build:licenses": "tsx ./app/services/openSourceLicenses/generate.server.ts generateLicenseFile",
     "build:localContent": "tsx ./app/services/cms/dumpCmsToFile.ts dumpCmsToFile",
     "build:pdf": "tsx ./app/services/pdf/pdf.generator.ts",
-    "build:storybook": "storybook build",
-    "build": "remix vite:build",
+    "build:storybook": "storybook build --output-dir ./build/client/storybook",
+    "build": "remix vite:build && npm run build:storybook",
     "dev": "node ./server.js",
     "format:fix": "prettier --write . --ignore-path .prettierignore",
     "format": "prettier --check . --ignore-path .prettierignore",

server.js

@@ -2,14 +2,15 @@ import { createRequestHandler } from "@remix-run/express";
 import compression from "compression";
 import express from "express";
 
-const viteDevServer =
-  process.env.NODE_ENV === "production"
-    ? undefined
-    : await import("vite").then((vite) =>
-        vite.createServer({
-          server: { middlewareMode: true },
-        }),
-      );
+const isProductionEnvironment = process.env.NODE_ENV === "production";
+
+const viteDevServer = isProductionEnvironment
+  ? undefined
+  : await import("vite").then((vite) =>
+      vite.createServer({
+        server: { middlewareMode: true },
+      }),
+    );
 
 const remixHandler = createRequestHandler({
   build: viteDevServer
@@ -37,7 +38,14 @@ if (viteDevServer) {
 
 // Everything else (like favicon.ico) is cached for an hour. You may want to be
 // more aggressive with this caching.
-app.use(express.static("build/client", { maxAge: "1h" }));
+const staticFileServer = express.static("build/client", { maxAge: "1h" });
+const mountPathWithoutStorybook = [
+  /^\/build\/client\/storybook($|\/)/,
+  "/build/client",
+];
+isProductionEnvironment
+  ? app.use(mountPathWithoutStorybook, staticFileServer)
+  : app.use(staticFileServer);
 
 // handle SSR requests
 app.all("*", remixHandler);