Upgrade Classic Remix Compiler to Remix Vite

.dockerignore

@@ -10,6 +10,5 @@ docker/volumes/
 docs/
 node_modules/
 playwright-report/
-public/build/
 test-results/
 test/

.gitignore

@@ -1,10 +1,10 @@
+.cache
 .env
 build/
 coverage/
 docker/volumes/
 node_modules/
 playwright-report/
 playwright/.cache/
-public/build/
 test-results/
 test/e2e/.auth

.oxlintrc.json

@@ -10,7 +10,6 @@
     "docs/**",
     "node_modules/**",
     "playwright-report/**",
-    "public/build/**",
     "test/e2e/**",
     "test-results/**",
     "playwright.config.ts"

Dockerfile

@@ -56,8 +56,8 @@ USER node
 COPY --chown=node:node --from=production-deps /app/.npmrc ./.npmrc
 COPY --chown=node:node --from=production-deps /app/node_modules ./node_modules
 COPY --chown=node:node --from=build /app/node_modules/.prisma ./node_modules/.prisma
-COPY --chown=node:node --from=build /app/build ./build
-COPY --chown=node:node --from=build /app/public ./public
+COPY --chown=node:node --from=build /app/build/server ./build/server
+COPY --chown=node:node --from=build /app/build/client ./build/client
 COPY --chown=node:node --from=build /app/prisma ./prisma
 
 # Include the SAML IDP metadata in the image. Specify the file to use in the build arg
@@ -67,7 +67,7 @@ ENV SAML_IDP_METADATA_PATH=/app/config/idp-metadata.xml
 
 COPY docker-entrypoint.sh /usr/local/bin/
 ENTRYPOINT ["/usr/bin/tini", "--", "docker-entrypoint.sh"]
-CMD ["node", "./build/server.js"]
+CMD ["node", "./build/server/index.js"]
 
 HEALTHCHECK CMD curl --fail http://localhost:${PORT}/healthcheck || exit 1
 EXPOSE ${PORT}

app/entry.server.tsx

@@ -8,6 +8,15 @@ import { renderToPipeableStream } from 'react-dom/server';
 import createEmotionServer from '@emotion/server/create-instance';
 import { CacheProvider } from '@emotion/react';
 import createEmotionCache from './createEmotionCache';
+import { createExpressApp } from 'remix-create-express-app';
+import * as crypto from 'crypto';
+import helmet from 'helmet';
+import cors from 'cors';
+import compression from 'compression';
+import express from 'express';
+import * as services from 'services';
+
+import type { Application, Request as ExpressRequest, Response as ExpressResponse } from 'express';
 
 const ABORT_DELAY = 5000;
 
@@ -62,3 +71,67 @@ export default function handleRequest(
     setTimeout(abort, ABORT_DELAY);
   });
 }
+
+export const app = await createExpressApp({
+  configure: (app: Application) => {
+    // setup additional express middleware here
+    const MODE = process.env.NODE_ENV;
+
+    app.use(compression());
+    app.use(cors());
+    app.use(
+      helmet({
+        contentSecurityPolicy: {
+          useDefaults: true,
+          directives: {
+            // Expect a nonce on scripts
+            scriptSrc: [
+              "'self'",
+              (_req, res) => `'nonce-${(res as ExpressResponse).locals.nonce}'`,
+            ],
+            // Allow live reload to work over a web socket in development
+            connectSrc: MODE === 'production' ? ["'self'"] : ["'self'", 'ws:'],
+            // Don't force https unless in production
+            upgradeInsecureRequests: MODE === 'production' ? [] : null,
+          },
+        },
+      })
+    );
+
+    // Remix fingerprints its assets so we can cache forever.
+    app.use('/build', express.static('build/client', { immutable: true, maxAge: '1y' }));
+
+    // Everything else (like favicon.ico) is cached for an hour. You may want to be
+    // more aggressive with this caching.
+    app.use(express.static('public', { maxAge: '1h' }));
+
+    app.use((_req, res, next) => {
+      res.locals.nonce = crypto.randomBytes(16).toString('hex');
+      next();
+    });
+    app.use((req, res, next) => {
+      // /clean-urls/ -> /clean-urls
+      if (req.path.endsWith('/') && req.path.length > 1) {
+        const query = req.url.slice(req.path.length);
+        const safepath = req.path.slice(0, -1).replace(/\/+/g, '/');
+        res.redirect(301, safepath + query);
+        return;
+      }
+      next();
+    });
+  },
+  // Pass the nonce we're setting in the CSP headers down to the Remix Loader/Action functions
+  getLoadContext: (_req: ExpressRequest, res: ExpressResponse) => ({ nonce: res.locals.nonce }),
+  createServer: (app) => {
+    const PORT = process.env.PORT || 8080;
+
+    const server = app.listen(PORT, () => {
+      // start the various background jobs we run (reconciler, expire records, etc)
+      services.init().then(() => {
+        logger.info(`✅ app ready: http://localhost:${PORT}`);
+      });
+    });
+
+    return server;
+  },
+});

app/root.tsx

@@ -1,14 +1,6 @@
 import { ChakraProvider } from '@chakra-ui/react';
 import { json } from '@remix-run/node';
-import {
-  Links,
-  LiveReload,
-  Meta,
-  Outlet,
-  Scripts,
-  ScrollRestoration,
-  useLoaderData,
-} from '@remix-run/react';
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, useLoaderData } from '@remix-run/react';
 
 import { getUser, getEffectiveUser, stopImpersonation } from './session.server';
 
@@ -70,7 +62,6 @@ function Document({ children }: { children: React.ReactNode }) {
         {children}
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
-        <LiveReload nonce={nonce} />
       </body>
     </html>
   );

eslint.config.cjs → eslint.config.mjs

@@ -1,23 +1,22 @@
-const path = require('node:path');
+import path from 'node:path';
+import js from '@eslint/js';
+import { includeIgnoreFile } from '@eslint/compat';
 
-const js = require('@eslint/js');
-const { includeIgnoreFile } = require('@eslint/compat');
+import typescriptEslint from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
 
-const typescriptEslint = require('@typescript-eslint/eslint-plugin');
-const typescriptParser = require('@typescript-eslint/parser');
+import importPlugin from 'eslint-plugin-import';
+import reactPlugin from 'eslint-plugin-react';
+import jsxA11yPlugin from 'eslint-plugin-jsx-a11y';
+import reactHooksPlugin from 'eslint-plugin-react-hooks';
+import oxlint from 'eslint-plugin-oxlint';
 
-const importPlugin = require('eslint-plugin-import');
-const reactPlugin = require('eslint-plugin-react');
-const jsxA11yPlugin = require('eslint-plugin-jsx-a11y');
-const reactHooksPlugin = require('eslint-plugin-react-hooks');
-const oxlint = require('eslint-plugin-oxlint');
+import globals from 'globals';
 
-const globals = require('globals');
-
-const gitignorePath = path.resolve(__dirname, '.gitignore');
+const gitignorePath = path.resolve(import.meta.dirname, '.gitignore');
 
 /** @type {import('eslint').Linter.Config[]} */
-module.exports = [
+export default [
   js.configs.recommended,
   importPlugin.flatConfigs.recommended,
   includeIgnoreFile(gitignorePath),
@@ -33,7 +32,7 @@ module.exports = [
     ],
   },
   {
-    files: ['**/*.{js,jsx,ts,tsx}'],
+    files: ['**/*.{js,jsx,ts,tsx,mjs}'],
     languageOptions: {
       ecmaVersion: 'latest',
       sourceType: 'module',
@@ -91,7 +90,7 @@ module.exports = [
     languageOptions: {
       parser: typescriptParser,
       parserOptions: {
-        tsconfigRootDir: __dirname,
+        tsconfigRootDir: import.meta.dirname,
         project: ['./tsconfig.json'],
       },
       globals: {
@@ -112,10 +111,11 @@ module.exports = [
       'no-undef': 'off',
     },
   },
-  // Node environment for eslint.config.cjs
+  // Node environment for eslint.config.mjs
   {
-    files: ['eslint.config.cjs'],
+    files: ['eslint.config.mjs'],
     languageOptions: {
+      sourceType: 'module',
       globals: {
         ...globals.node,
       },