diff --git a/frontend/index.html b/frontend/index.html index 3e25fa66d771..ccc35d2c125a 100644 --- a/frontend/index.html +++ b/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`. --> - + diff --git a/frontend/package.json b/frontend/package.json index 36393984cdc9..3acf2eb6eee4 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx new file mode 100644 index 000000000000..499cb2453e98 --- /dev/null +++ b/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( + + + + + + + + + + + + + + , + ); +}); diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts index f0717b899689..7e57a2fd72cc 100644 --- a/frontend/vite.config.ts +++ b/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: {