diff --git a/features/conversation-assistant/frontend-dev/package.json b/features/conversation-assistant/frontend-dev/package.json
index 44b14f0b6..0435f4c10 100644
--- a/features/conversation-assistant/frontend-dev/package.json
+++ b/features/conversation-assistant/frontend-dev/package.json
@@ -19,6 +19,7 @@
},
"dependencies": {
"@lilith/design-tokens": "workspace:*",
+ "@lilith/service-react-bootstrap": "^1.0.0",
"@lilith/react-hooks": "workspace:*",
"@lilith/react-query-utils": "workspace:*",
"@lilith/types": "workspace:*",
diff --git a/features/conversation-assistant/frontend-dev/src/main.tsx b/features/conversation-assistant/frontend-dev/src/main.tsx
index d6528314c..65f6af9a2 100644
--- a/features/conversation-assistant/frontend-dev/src/main.tsx
+++ b/features/conversation-assistant/frontend-dev/src/main.tsx
@@ -1,43 +1,28 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { BrowserRouter } from 'react-router-dom';
+import { bootstrap } from '@lilith/service-react-bootstrap';
import { ThemeProvider } from '@lilith/ui-theme';
import { ToastProvider } from '@lilith/ui-feedback';
import { App } from './App';
-import { ErrorBoundary } from './components/ErrorBoundary';
import './index.css';
-const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- staleTime: 30_000,
- refetchOnWindowFocus: false,
- retry: 1,
- },
- mutations: {
- retry: 0,
+bootstrap({
+ App,
+ queryClient: {
+ defaultOptions: {
+ queries: {
+ staleTime: 30_000,
+ refetchOnWindowFocus: false,
+ retry: 1,
+ },
+ mutations: {
+ retry: 0,
+ },
},
},
+ providers: {
+ router: 'browser',
+ wrappers: [
+ { Provider: ThemeProvider, props: { defaultTheme: 'cyberpunk' } },
+ { Provider: ToastProvider, props: {} },
+ ],
+ },
});
-
-const rootElement = document.getElementById('root');
-if (!rootElement) {
- throw new Error('Root element not found');
-}
-
-ReactDOM.createRoot(rootElement).render(
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
diff --git a/features/feature-flags/frontend-admin/package.json b/features/feature-flags/frontend-admin/package.json
index b703bb076..dd2381512 100644
--- a/features/feature-flags/frontend-admin/package.json
+++ b/features/feature-flags/frontend-admin/package.json
@@ -12,6 +12,7 @@
},
"dependencies": {
"@lilith/feature-flags": "workspace:*",
+ "@lilith/service-react-bootstrap": "^1.0.0",
"@lilith/types": "workspace:*",
"@tanstack/react-query": "^5.62.0",
"clsx": "^2.1.1",
diff --git a/features/feature-flags/frontend-admin/src/main.tsx b/features/feature-flags/frontend-admin/src/main.tsx
index 8bc14e294..dde01477c 100644
--- a/features/feature-flags/frontend-admin/src/main.tsx
+++ b/features/feature-flags/frontend-admin/src/main.tsx
@@ -1,25 +1,18 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { BrowserRouter } from 'react-router-dom';
+import { bootstrap } from '@lilith/service-react-bootstrap';
import App from './App';
import './index.css';
-const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- staleTime: 1000 * 60, // 1 minute
- retry: 1,
+bootstrap({
+ App,
+ queryClient: {
+ defaultOptions: {
+ queries: {
+ staleTime: 1000 * 60, // 1 minute
+ retry: 1,
+ },
},
},
+ providers: {
+ router: 'browser',
+ },
});
-
-createRoot(document.getElementById('root')!).render(
-
-
-
-
-
-
- ,
-);
diff --git a/features/landing/frontend-public/package.json b/features/landing/frontend-public/package.json
index bbb8d6cd6..8afa466ce 100644
--- a/features/landing/frontend-public/package.json
+++ b/features/landing/frontend-public/package.json
@@ -34,6 +34,7 @@
},
"dependencies": {
"@lilith/age-verification-react": "workspace:*",
+ "@lilith/service-react-bootstrap": "^1.0.0",
"@lilith/analytics-client": "workspace:*",
"@lilith/api-client": "workspace:*",
"@lilith/auth-provider": "workspace:*",
diff --git a/features/landing/frontend-public/src/main.tsx b/features/landing/frontend-public/src/main.tsx
index 77c9fd477..b75d4c644 100644
--- a/features/landing/frontend-public/src/main.tsx
+++ b/features/landing/frontend-public/src/main.tsx
@@ -1,10 +1,7 @@
import { AnalyticsProvider } from '@lilith/analytics-client/react'
import { I18nProvider } from '@lilith/i18n'
import { ThemeProvider } from '@ui/theme'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import { ErrorBoundary } from 'react-error-boundary'
+import { bootstrap } from '@lilith/service-react-bootstrap'
import { Toaster } from 'react-hot-toast'
import App from './App'
@@ -13,14 +10,8 @@ import { workers } from './config'
import { CartProvider, DevUserProvider } from './contexts'
import { bundledResources, useApiMode, LANDING_NAMESPACES } from './locales'
-// Glassmorphism tokens imported from @lilith/ui-glassmorphism (imported by Header.css and other components)
import './index.css'
-// i18n Strategy:
-// - Development (default): Use bundled JSON locales for instant loading (0ms)
-// - API mode (VITE_I18N_USE_API=true): Use ML translation API for testing
-// The bundled approach eliminates network dependency during development
-
/**
* Initialize MSW for development API mocking
*
@@ -39,40 +30,20 @@ async function initMSW(): Promise {
await startMockServiceWorker()
}
-// Create a QueryClient for React Query
-const queryClient = new QueryClient({
- defaultOptions: {
- queries: {
- staleTime: 1000 * 60 * 5, // 5 minutes
- retry: 1,
- },
- },
-})
-
// Register service worker for translation caching
-if ('serviceWorker' in navigator && import.meta.env.PROD) {
- window.addEventListener('load', () => {
- navigator.serviceWorker
- .register(workers.i18n)
- .then((registration) => {
- console.log('[i18n] Service worker registered:', registration.scope)
- })
- .catch((error) => {
- console.warn('[i18n] Service worker registration failed:', error)
- })
- })
-}
-
-// Note: ErrorFallback cannot use i18n because it renders outside the I18nProvider
-// when the error boundary catches errors during provider initialization.
-// This is an acceptable exception - error boundaries need hardcoded fallback text.
-function ErrorFallback({ error }: { error: Error }) {
- return (
-
-
Something went wrong
-
{error.message}
-