chore(themebuilder): custom server adapter (#4326)

Author: Barsnes

apps/themebuilder/package.json

@@ -4,8 +4,8 @@
   "type": "module",
   "scripts": {
     "build": "react-router build",
-    "dev": "react-router dev",
-    "start": "react-router-serve ./dist/server/index.js",
+    "dev": "cross-env NODE_ENV=development node server.js",
+    "start": "node server.js",
     "types": "react-router typegen && tsc"
   },
   "dependencies": {
@@ -16,11 +16,15 @@
     "@internal/components": "workspace:^",
     "@navikt/aksel-icons": "^7.35.1",
     "@radix-ui/react-slot": "^1.2.4",
+    "@react-router/express": "^7.10.1",
     "@react-router/node": "^7.10.1",
-    "@react-router/serve": "^7.10.1",
     "clsx": "^2.1.1",
+    "compression": "^1.8.1",
+    "cross-env": "^10.1.0",
+    "express": "^5.2.1",
     "i18next": "^25.7.1",
     "isbot": "^5.1.32",
+    "morgan": "^1.10.1",
     "react": "^19.2.1",
     "react-color-palette": "^7.3.1",
     "react-dom": "^19.2.1",
@@ -30,11 +34,14 @@
   },
   "devDependencies": {
     "@react-router/dev": "^7.10.1",
+    "@types/express": "^5.0.6",
+    "@types/express-serve-static-core": "^5.1.0",
+    "@types/morgan": "^1.9.10",
     "@types/node": "^22.19.1",
     "@types/ramda": "^0.31.1",
-    "ramda": "^0.32.0",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
+    "ramda": "^0.32.0",
     "typescript": "^5.9.3",
     "vite": "^7.2.7",
     "vite-tsconfig-paths": "^5.1.4"

apps/themebuilder/public/robots.txt

@@ -1,2 +1,2 @@
 User-agent: *
-Allow: /
+Disallow: /

apps/themebuilder/react-router.config.ts

@@ -7,8 +7,6 @@ import type { Config } from '@react-router/dev/config';
 const dirname = cwd();
 
 const config: Config = {
-  // Config options...
-  // Server-side render by default, to enable SPA mode set this to `false`
   ssr: true,
   buildDirectory: 'dist',
   presets: [],
@@ -22,6 +20,10 @@ const config: Config = {
     console.log(`Writing robots.txt to ${robotsPath}`);
     try {
       writeFileSync(robotsPath, robotsContent);
+      writeFileSync(
+        join(dirname, 'dist', 'client', 'robots.txt'),
+        robotsContent,
+      );
     } catch (error) {
       console.error(`Error writing robots.txt file: ${error}`);
       throw new Error(`Failed to write robots.txt file: ${error}`);

apps/themebuilder/server.js

@@ -0,0 +1,51 @@
+import compression from 'compression';
+import express from 'express';
+import morgan from 'morgan';
+
+// Short-circuit the type-checking of the built output.
+const BUILD_PATH = './dist/server/index.js';
+const DEVELOPMENT = process.env.NODE_ENV === 'development';
+const PORT = Number.parseInt(process.env.PORT || '3000', 10);
+
+const app = express();
+
+app.use(compression());
+app.disable('x-powered-by');
+
+if (DEVELOPMENT) {
+  console.log('Starting development server');
+  const viteDevServer = await import('vite').then((vite) =>
+    vite.createServer({
+      server: { middlewareMode: true },
+    }),
+  );
+  app.use(viteDevServer.middlewares);
+  app.use(async (req, res, next) => {
+    try {
+      const source = await viteDevServer.ssrLoadModule('./server/app.ts');
+      return await source.app(req, res, next);
+    } catch (error) {
+      if (typeof error === 'object' && error instanceof Error) {
+        viteDevServer.ssrFixStacktrace(error);
+      }
+      next(error);
+    }
+  });
+} else {
+  console.log('Starting production server');
+  app.use(
+    '/assets',
+    express.static('dist/client/assets', { immutable: true, maxAge: '1y' }),
+  );
+  app.use(morgan('tiny'));
+  app.use(
+    '/.well-known',
+    express.static('dist/client/.well-known', { maxAge: '1y' }),
+  );
+  app.use(express.static('dist/client', { maxAge: '30d' }));
+  app.use(await import(BUILD_PATH).then((mod) => mod.app));
+}
+
+app.listen(PORT, () => {
+  console.log(`Server is running on http://localhost:${PORT}`);
+});

apps/themebuilder/server/app.ts

@@ -0,0 +1,49 @@
+import 'react-router';
+import { createRequestHandler } from '@react-router/express';
+import express from 'express';
+
+const DEVELOPMENT = process.env.NODE_ENV === 'development';
+
+const connectSrc = [
+  "'self'",
+  'https://altinncdn.no',
+  DEVELOPMENT && 'ws://localhost:*',
+]
+  .filter(Boolean)
+  .join(' ');
+
+export const app = express();
+
+app.use((req, res, next) => {
+  res.setHeader('X-Content-Type-Options', 'nosniff');
+  res.setHeader(
+    'Strict-Transport-Security',
+    'max-age=31536000; includeSubDomains',
+  );
+  res.setHeader('X-Frame-Options', 'SAMEORIGIN');
+  res.setHeader(
+    'Content-Security-Policy-Report-Only',
+    `default-src 'none';base-uri 'self';script-src 'self' 'unsafe-inline' 'unsafe-eval';style-src 'self' https://altinncdn.no https://siteimproveanalytics.com 'unsafe-inline';font-src 'self' https://altinncdn.no;img-src 'self' data:;connect-src ${connectSrc};frame-ancestors 'self';form-action 'self';manifest-src 'self';`,
+  );
+  res.setHeader(
+    'Strict-Transport-Security',
+    'max-age=31536000; includeSubDomains',
+  );
+  res.setHeader('X-Content-Type-Options', 'nosniff');
+  res.setHeader('Cache-Control', 'max-age');
+  /* Stop TRACE request */
+  if (req.method === 'TRACE') {
+    res
+      .status(405)
+      .type('text/plain; charset=utf-8')
+      .send('method not allowed');
+    return;
+  }
+  next();
+});
+
+app.use(
+  createRequestHandler({
+    build: () => import('virtual:react-router/server-build'),
+  }),
+);

apps/themebuilder/vite.config.ts

@@ -2,9 +2,12 @@ import { reactRouter } from '@react-router/dev/vite';
 import { defineConfig } from 'vite';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
-export default defineConfig({
+export default defineConfig(({ isSsrBuild }) => ({
   plugins: [reactRouter(), tsconfigPaths()],
   ssr: {
-    noExternal: ['ramda'],
+    noExternal: ['@navikt/aksel-icons', 'ramda'],
   },
-});
+  build: {
+    rollupOptions: isSsrBuild ? { input: './server/app.ts' } : undefined,
+  },
+}));

apps/www/app/_utils/redirects.server.ts

@@ -80,11 +80,11 @@ const redirects = [
     to: '/en/fundamentals/design-elements/shadows',
   },
   {
-    from: '/no/fundamentals/resources/icons/',
+    from: '/no/fundamentals/resources/icons',
     to: '/no/fundamentals/design-elements/icons',
   },
   {
-    from: '/en/fundamentals/resources/icons/',
+    from: '/en/fundamentals/resources/icons',
     to: '/en/fundamentals/design-elements/icons',
   },
 ];

apps/www/server/app.ts

@@ -25,6 +25,11 @@ app.use((req, res, next) => {
     'Content-Security-Policy-Report-Only',
     `default-src 'none';base-uri 'self';script-src 'self' 'unsafe-inline' 'unsafe-eval';style-src 'self' https://altinncdn.no https://siteimproveanalytics.com 'unsafe-inline';font-src 'self' https://altinncdn.no;img-src 'self' data:;connect-src ${connectSrc};frame-ancestors 'self';form-action 'self';manifest-src 'self';`,
   );
+  res.setHeader(
+    'Strict-Transport-Security',
+    'max-age=31536000; includeSubDomains',
+  );
+  res.setHeader('X-Content-Type-Options', 'nosniff');
   res.setHeader('Cache-Control', 'max-age');
   /* Stop TRACE request */
   if (req.method === 'TRACE') {