Move to Vite bundler

Remix template commit ref: 6a9e17cd29fad733acf36a51936319702d05245c

.dockerignore

@@ -4,13 +4,12 @@
 # Include files required for building the application (except for node_modules these are installed by docker)
 !app
 !public
-public/build
 !LICENSE
 !package-lock.json
 !package.json
 !README.md
-!remix.config.js
-!remix.env.d.ts
 !SECURITY.md
 !tailwind.config.js
 !tsconfig.json
+!postcss.config.mjs
+!vite.config.ts

.gitignore

@@ -1,7 +1,6 @@
 # Remix
 /.cache
 /build
-/public/build
 
 # Logs
 logs

Dockerfile

@@ -42,8 +42,8 @@ WORKDIR /home/node/src
 # Move only the files to the final image that are really needed
 COPY --chown=node:node package*.json LICENSE SECURITY.md ./
 COPY --chown=node:node --from=production-dependencies /src/node_modules/ ./node_modules/
-COPY --chown=node:node --from=build /src/build/ ./build/
-COPY --chown=node:node --from=build /src/public/ ./public/
+COPY --chown=node:node --from=build /src/build/server ./build/server
+COPY --chown=node:node --from=build /src/build/client ./build/client
 
 EXPOSE 3000
 CMD ["npm", "run", "start"]

README.md

@@ -96,7 +96,7 @@ docker run -d -p 3000:3000 --name a2j-kommunikationsplattform a2j-kommunikations
 
 The website is then available under http://localhost:3000
 
-If you want to include any additional files during the build that are not in the `app` or `public` directories you need to add them to the `.dockerignore` file.
+If you want to include any additional files during the build that are not in the `app` directories you need to add them to the `.dockerignore` file.
 
 The `.github/workflows/pipeline.yml` GitHub Action includes a `build-and-push-image` job to build the Docker Image and push it to GitHub Packages.
 
@@ -107,7 +107,6 @@ If you're familiar with deploying node applications, the built-in Remix app serv
 Make sure to deploy the output of `npm run build`
 
 - `build/`
-- `public/build/`
 
 ## Architecture Decision Records
 

app/root.tsx

@@ -1,33 +1,28 @@
-import { cssBundleHref } from "@remix-run/css-bundle";
 import type { LinksFunction } from "@remix-run/node";
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
 } from "@remix-run/react";
 
-import stylesheet from "~/styles.css";
-import fontsStylesheet from "@digitalservice4germany/angie/fonts.css";
-import fontRegular from "~/../public/fonts/BundesSansWeb-Regular.woff2";
-import fontBold from "~/../public/fonts/BundesSansWeb-Bold.woff2";
+import stylesheet from "~/styles.css?url";
+import fontsStylesheet from "@digitalservice4germany/angie/fonts.css?url";
 
 export const links: LinksFunction = () => [
-  ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : []),
   {
     rel: "preload",
     as: "font",
     type: "font/woff2",
-    href: fontRegular,
+    href: "/fonts/BundesSansWeb-Regular.woff2",
     crossOrigin: "anonymous",
   },
   {
     rel: "preload",
     as: "font",
     type: "font/woff2",
-    href: fontBold,
+    href: "/fonts/BundesSansWeb-Bold.woff2",
     crossOrigin: "anonymous",
   },
   { rel: "stylesheet", href: fontsStylesheet },
@@ -48,7 +43,6 @@ export default function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );

package.json

@@ -4,9 +4,9 @@
   "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "remix build",
-    "dev": "remix dev --manual",
-    "start": "remix-serve ./build/index.js",
+    "build": "remix vite:build",
+    "dev": "remix vite:dev",
+    "start": "remix-serve ./build/server/index.js",
     "typecheck": "tsc",
     "test": "jest test",
     "test:e2e": "playwright test --config=tests/e2e/playwright.config.ts",
@@ -23,7 +23,6 @@
   "dependencies": {
     "@digitalservice4germany/angie": "^1.2.0",
     "@digitalservice4germany/style-dictionary": "^2.0.0",
-    "@remix-run/css-bundle": "^2.13.1",
     "@remix-run/node": "^2.13.1",
     "@remix-run/react": "^2.13.1",
     "@remix-run/serve": "^2.13.1",
@@ -49,7 +48,9 @@
     "prettier": "3.3.3",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",
-    "typescript": "^5.6.3"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vite-tsconfig-paths": "^5.1.0"
   },
   "engines": {
     "node": ">=20.0.0"

postcss.config.mjs

@@ -0,0 +1,3 @@
+export default {
+  plugins: { tailwindcss: {} },
+};

tsconfig.json

@@ -1,6 +1,9 @@
 {
   "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
   "compilerOptions": {
+    "types": ["@remix-run/node", "vite/client"],
+    "skipLibCheck": true,
+    "module": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ES2022"],
     "isolatedModules": true,
     "esModuleInterop": true,

vite.config.ts

@@ -0,0 +1,10 @@
+import { vitePlugin as remix } from "@remix-run/dev";
+import { installGlobals } from "@remix-run/node";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+installGlobals();
+
+export default defineConfig({
+  plugins: [remix(), tsconfigPaths()],
+});