Move all the frontend entrypoints to a dedicated directory

sandhose · sandhose · commit 2caa6e7f04a0 · 2025-11-18T16:22:40.000+01:00
This will make it easier to add new entrypoints in the future without
having to change the vite config
diff --git a/frontend/index.html b/frontend/index.html
@@ -23,6 +23,6 @@
 
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/entrypoints/main.tsx"></script>
   </body>
 </html>
diff --git a/frontend/knip.config.ts b/frontend/knip.config.ts
@@ -6,7 +6,7 @@
 import type { KnipConfig } from "knip";
 
 export default {
-  entry: ["src/main.tsx", "src/swagger.ts", "src/routes/*"],
+  entry: ["src/entrypoints/*", "src/routes/*"],
   ignore: [
     "src/gql/*",
     "src/routeTree.gen.ts",
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -74,6 +74,7 @@
     "rimraf": "^6.0.1",
     "storybook": "^10.0.5",
     "tailwindcss": "^3.4.18",
+    "tinyglobby": "^0.2.15",
     "typescript": "^5.9.3",
     "vite": "7.2.2",
     "vite-plugin-compression": "^0.5.1",
diff --git a/frontend/src/entrypoints/main.tsx b/frontend/src/entrypoints/main.tsx
@@ -10,11 +10,11 @@ import { TooltipProvider } from "@vector-im/compound-web";
 import { StrictMode, Suspense } from "react";
 import { createRoot } from "react-dom/client";
 import { I18nextProvider } from "react-i18next";
-import ErrorBoundary from "./components/ErrorBoundary";
-import LoadingScreen from "./components/LoadingScreen";
-import { queryClient } from "./graphql";
-import i18n, { setupI18n } from "./i18n";
-import { router } from "./router";
+import ErrorBoundary from "../components/ErrorBoundary";
+import LoadingScreen from "../components/LoadingScreen";
+import { queryClient } from "../graphql";
+import i18n, { setupI18n } from "../i18n";
+import { router } from "../router";
 import "./shared.css";
 
 setupI18n();
diff --git a/frontend/src/entrypoints/shared.css b/frontend/src/entrypoints/shared.css
diff --git a/frontend/src/entrypoints/swagger.ts b/frontend/src/entrypoints/swagger.ts
diff --git a/frontend/src/entrypoints/templates.css b/frontend/src/entrypoints/templates.css
@@ -5,18 +5,18 @@
  * Please see LICENSE files in the repository root for full details.
  */
 
-@import url("./styles/cpd-button.css");
-@import url("./styles/cpd-form.css");
-@import url("./styles/cpd-link.css");
-@import url("./styles/cpd-text-control.css");
-@import url("./styles/cpd-mfa-control.css");
-@import url("./styles/cpd-checkbox-control.css");
-
-@import url("./components/SessionCard/SessionCard.module.css");
-@import url("./components/Session/DeviceTypeIcon.module.css");
-@import url("./components/Layout/Layout.module.css");
-@import url("./components/Footer/Footer.module.css");
-@import url("./components/PageHeading/PageHeading.module.css");
+@import url("../styles/cpd-button.css");
+@import url("../styles/cpd-form.css");
+@import url("../styles/cpd-link.css");
+@import url("../styles/cpd-text-control.css");
+@import url("../styles/cpd-mfa-control.css");
+@import url("../styles/cpd-checkbox-control.css");
+
+@import url("../components/SessionCard/SessionCard.module.css");
+@import url("../components/Session/DeviceTypeIcon.module.css");
+@import url("../components/Layout/Layout.module.css");
+@import url("../components/Footer/Footer.module.css");
+@import url("../components/PageHeading/PageHeading.module.css");
 
 .cpd-text-body-lg-regular {
   font: var(--cpd-font-body-lg-regular);
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -7,6 +7,7 @@
 import { readFile, writeFile } from "node:fs/promises";
 import { resolve } from "node:path";
 
+import { globSync } from "tinyglobby";
 import { tanstackRouter } from "@tanstack/router-plugin/vite";
 import react from "@vitejs/plugin-react";
 import browserslistToEsbuild from "browserslist-to-esbuild";
@@ -53,12 +54,8 @@ export default defineConfig((env) => ({
     cssCodeSplit: true,
 
     rollupOptions: {
-      input: [
-        resolve(__dirname, "src/main.tsx"),
-        resolve(__dirname, "src/shared.css"),
-        resolve(__dirname, "src/templates.css"),
-        resolve(__dirname, "src/swagger.ts"),
-      ],
+      // This uses all the files in the src/entrypoints directory as inputs
+      input: globSync(resolve(__dirname, "src/entrypoints/**/*.{css,ts,tsx}")),
     },
   },
 
diff --git a/templates/app.html b/templates/app.html
@@ -22,7 +22,7 @@
     <script>
       window.APP_CONFIG = JSON.parse("{{ config | tojson | add_slashes | safe }}");
     </script>
-    {{ include_asset('src/main.tsx') | indent(4) | safe }}
+    {{ include_asset('src/entrypoints/main.tsx') | indent(4) | safe }}
   </head>
 
   <body>
diff --git a/templates/base.html b/templates/base.html
@@ -23,8 +23,8 @@
     <meta charset="utf-8">
     <title>{% block title %}{{ _("app.name") }}{% endblock title %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    {{ include_asset('src/shared.css') | indent(4) | safe }}
-    {{ include_asset('src/templates.css') | indent(4) | safe }}
+    {{ include_asset('src/entrypoints/shared.css') | indent(4) | safe }}
+    {{ include_asset('src/entrypoints/templates.css') | indent(4) | safe }}
     {{ captcha.head() }}
   </head>
   <body>
diff --git a/templates/swagger/doc.html b/templates/swagger/doc.html
@@ -18,7 +18,7 @@
         callbackUrl: "{{ callback_url | add_slashes | safe }}",
       };
     </script>
-    {{ include_asset('src/swagger.ts') | indent(4) | safe }}
+    {{ include_asset('src/entrypoints/swagger.ts') | indent(4) | safe }}
   </head>
 
   <body>
