Switch to standard React Router setup with Vite

frontend/index.html

@@ -39,6 +39,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <script type="module" src="/src/index.tsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

frontend/package.json

@@ -49,8 +49,8 @@
     "ws": "^8.18.0"
   },
   "scripts": {
-    "dev": "npm run make-i18n && cross-env VITE_MOCK_API=false react-router dev",
-    "dev:mock": "npm run make-i18n && cross-env VITE_MOCK_API=true react-router dev",
+    "dev": "npm run make-i18n && cross-env VITE_MOCK_API=false vite",
+    "dev:mock": "npm run make-i18n && cross-env VITE_MOCK_API=true vite",
     "build": "npm run make-i18n && tsc && vite build",
     "start": "npx sirv-cli build/ --single",
     "test": "vitest run",

frontend/src/main.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { Provider } from "react-redux";
+import { BrowserRouter } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import posthog from "posthog-js";
+import "./i18n";
+import store from "./store";
+import { useConfig } from "./hooks/query/use-config";
+import { AuthProvider } from "./context/auth-context";
+import { queryClientConfig } from "./query-client-config";
+import { SettingsProvider } from "./context/settings-context";
+import App from "./root";
+
+function PosthogInit() {
+  const { data: config } = useConfig();
+
+  React.useEffect(() => {
+    if (config?.POSTHOG_CLIENT_KEY) {
+      posthog.init(config.POSTHOG_CLIENT_KEY, {
+        api_host: "https://us.i.posthog.com",
+        person_profiles: "identified_only",
+      });
+    }
+  }, [config]);
+
+  return null;
+}
+
+async function prepareApp() {
+  if (
+    process.env.NODE_ENV === "development" &&
+    import.meta.env.VITE_MOCK_API === "true"
+  ) {
+    const { worker } = await import("./mocks/browser");
+
+    await worker.start({
+      onUnhandledRequest: "bypass",
+    });
+  }
+}
+
+const queryClient = new QueryClient(queryClientConfig);
+
+prepareApp().then(() => {
+  const container = document.getElementById("root");
+  if (!container) throw new Error("#root element not found");
+
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <Provider store={store}>
+        <AuthProvider>
+          <QueryClientProvider client={queryClient}>
+            <SettingsProvider>
+              <BrowserRouter>
+                <App />
+                <PosthogInit />
+              </BrowserRouter>
+            </SettingsProvider>
+          </QueryClientProvider>
+        </AuthProvider>
+      </Provider>
+    </React.StrictMode>,
+  );
+});

frontend/vite.config.ts

@@ -3,7 +3,7 @@
 import { defineConfig, loadEnv } from "vite";
 import viteTsconfigPaths from "vite-tsconfig-paths";
 import svgr from "vite-plugin-svgr";
-import { reactRouter } from "@react-router/dev/vite";
+import react from "@vitejs/plugin-react";
 import { configDefaults } from "vitest/config";
 
 export default defineConfig(({ mode }) => {
@@ -26,10 +26,10 @@ export default defineConfig(({ mode }) => {
   return {
     base: '/',
     plugins: [
-      !process.env.VITEST && reactRouter(),
+      !process.env.VITEST && react(),
       viteTsconfigPaths(),
       svgr(),
-    ],
+    ].filter(Boolean),
     server: {
       port: FE_PORT,
       proxy: {