feat: support BASE_URL

index.html

@@ -8,7 +8,6 @@
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
   <meta name="apple-mobile-web-app-title" content="OmniTools" />
   <link rel="manifest" href="/site.webmanifest" />
-  <link href="/assets/fonts/quicksand/quick-sand.css" rel="stylesheet" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>OmniTools</title>
 </head>

src/components/App.tsx

@@ -59,7 +59,7 @@ function App() {
         >
           <CustomSnackBarProvider>
             <UserTypeFilterProvider>
-              <BrowserRouter>
+              <BrowserRouter basename={import.meta.env.BASE_URL}>
                 <Navbar
                   mode={mode}
                   onChangeMode={() => {

src/i18n/index.ts

@@ -34,7 +34,9 @@ i18n
       escapeValue: false // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
     },
     backend: {
-      loadPath: '/locales/{{lng}}/{{ns}}.json'
+      loadPath: `${
+        (import.meta as any).env.BASE_URL?.replace(/\/$/, '') || ''
+      }/locales/{{lng}}/{{ns}}.json`
     },
     detection: {
       lookupLocalStorage: 'lang',

src/index.tsx

@@ -1,5 +1,6 @@
 import { createRoot } from 'react-dom/client';
 import 'tailwindcss/tailwind.css';
+import 'assets/fonts/quicksand/quick-sand.css';
 import App from 'components/App';
 
 const container = document.getElementById('root') as HTMLDivElement;

src/pages/home/index.tsx

@@ -4,6 +4,8 @@ import Categories from './Categories';
 import { Helmet } from 'react-helmet';
 import { useUserTypeFilter } from 'providers/UserTypeFilterProvider';
 import UserTypeFilter from '@components/UserTypeFilter';
+import backgroundDark from 'assets/background-dark.png';
+import backgroundLight from 'assets/background.svg';
 
 export default function Home() {
   const theme = useTheme();
@@ -16,10 +18,8 @@ export default function Home() {
         lg: 5
       }}
       sx={{
-        background: `url(/assets/${
+        background: `url(${
-          theme.palette.mode === 'dark'
+          theme.palette.mode === 'dark' ? backgroundDark : backgroundLight
-            ? 'background-dark.png'
-            : 'background.svg'
         })`,
         backgroundColor: 'background.default'
       }}

vite.config.ts

@@ -1,22 +1,26 @@
 /// <reference types="vitest" />
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } from 'vite';
 import react from '@vitejs/plugin-react-swc';
 import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config https://vitest.dev/config
-export default defineConfig({
+export default defineConfig(({ mode }) => {
-  plugins: [react(), tsconfigPaths()],
+  const env = loadEnv(mode, process.cwd(), '');
-  define: {
+  return {
-    'process.env': {}
+    base: env.BASE_URL || '/',
-  },
+    plugins: [react(), tsconfigPaths()],
-  optimizeDeps: {
+    define: {
-    exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util']
+      'process.env': {}
-  },
+    },
-  test: {
+    optimizeDeps: {
-    globals: true,
+      exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util']
-    environment: 'happy-dom',
+    },
-    setupFiles: '.vitest/setup',
+    test: {
-    include: ['**/*.test.{ts,tsx}']
+      globals: true,
-  },
+      environment: 'happy-dom',
-  worker: { format: 'es' }
+      setupFiles: '.vitest/setup',
+      include: ['**/*.test.{ts,tsx}']
+    },
+    worker: { format: 'es' }
+  };
 });