The Jellystat frontend entrypoint initializes internationalization (i18n) using i18next before mounting the React application.
Internationalization Configuration
- Fallback Language:
en-GB - Backend: Uses
i18next-http-backend to load translation files from ${baseUrl}/locales/{{lng}}/{{ns}}.json. - Language Detection: Detects language via a priority order:
cookie, localStorage, sessionStorage, navigator, htmlTag, querystring, path, and subdomain. It caches the detected language in cookie. - Interpolation:
escapeValue is set to false.
Application Mounting
Once i18n is initialized, the application is rendered into the DOM element with ID root using the following structure:
React.StrictMode for development checks.Suspense with a <Loading /> component as the fallback during lazy loading.BrowserRouter using baseUrl as the basename to ensure correct routing relative to the deployment path.- The
<App /> component as the root of the application.
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
fallbackLng: "en-GB",
debug: false,
backend: {
loadPath: `${baseUrl}/locales/{{lng}}/{{ns}}.json`,
},
detection: {
order: ["cookie", "localStorage", "sessionStorage", "navigator", "htmlTag", "querystring", "path", "subdomain"],
cache: ["cookie"],
},
interpolation: {
escapeValue: false,
},
})
.then(() => {
createRoot(document.getElementById("root")).render(
<React.StrictMode>
<Suspense fallback={<Loading />}>
<BrowserRouter basename={baseUrl}>
<App />
</BrowserRouter>
</Suspense>
</React.StrictMode>
);
});