fix: routing with using environment basename (#12)

* refactor: test branch for publishing

* fix: directory source with upload page

* fix: routing with using environment basename

application/frontend/.env.example

@@ -1 +1 @@
-VITE_BASE_URL='https://example.com/path'
+VITE_BASENAME='/'

application/frontend/CHANGELOG.md

@@ -7,22 +7,19 @@
 
 ## [1.2.1](https://github.com/digitable-lol/light-traffic/compare/v1.2.0...v1.2.1) (2024-08-20)
 
-
 ### Bug Fixes
 
-* getting base url with demo page ([#10](https://github.com/digitable-lol/light-traffic/issues/10)) ([4f9849c](https://github.com/digitable-lol/light-traffic/commit/4f9849c8b57ce4c5c1dbb96a1e10133081ad2eba))
+- getting base url with demo page ([#10](https://github.com/digitable-lol/light-traffic/issues/10)) ([4f9849c](https://github.com/digitable-lol/light-traffic/commit/4f9849c8b57ce4c5c1dbb96a1e10133081ad2eba))
 
 # [1.2.0](https://github.com/digitable-lol/light-traffic/compare/v1.1.0...v1.2.0) (2024-08-20)
 
-
 ### Features
 
-* connect ci with publishing demo page ([#8](https://github.com/digitable-lol/light-traffic/issues/8)) ([6eb02f5](https://github.com/digitable-lol/light-traffic/commit/6eb02f502c8e778a79c359d7b4bf0f54f9ddf3f2))
+- connect ci with publishing demo page ([#8](https://github.com/digitable-lol/light-traffic/issues/8)) ([6eb02f5](https://github.com/digitable-lol/light-traffic/commit/6eb02f502c8e778a79c359d7b4bf0f54f9ddf3f2))
 
 # [1.1.0](https://github.com/digitable-lol/light-traffic/compare/v1.0.0...v1.1.0) (2024-08-20)
 
-
 ### Features
 
-* **backend, frontend:** add Swagger, CRUD for views at backend & CI repair at frontend ([#6](https://github.com/digitable-lol/light-traffic/issues/6)) ([ad1e88b](https://github.com/digitable-lol/light-traffic/commit/ad1e88bf13f1c4584d8a7a42787d4153f03f490b))
-* build demo page ([#7](https://github.com/digitable-lol/light-traffic/issues/7)) ([43a02b7](https://github.com/digitable-lol/light-traffic/commit/43a02b7dffed6faa2e58a11242a71c3fdea5da09))
+- **backend, frontend:** add Swagger, CRUD for views at backend & CI repair at frontend ([#6](https://github.com/digitable-lol/light-traffic/issues/6)) ([ad1e88b](https://github.com/digitable-lol/light-traffic/commit/ad1e88bf13f1c4584d8a7a42787d4153f03f490b))
+- build demo page ([#7](https://github.com/digitable-lol/light-traffic/issues/7)) ([43a02b7](https://github.com/digitable-lol/light-traffic/commit/43a02b7dffed6faa2e58a11242a71c3fdea5da09))

application/frontend/package.json

@@ -12,7 +12,7 @@
     "dev": "vite dev",
     "start": "vite",
     "build": "tsc -b && vite build",
-    "build:demo": "tsc -b && vite build --outDir ../../demo --emptyOutDir",
+    "build:demo": "tsc -b && VITE_BASENAME='/light-traffic' vite build --outDir ../../demo --emptyOutDir",
     "lint": "eslint .",
     "preview": "vite preview",
     "format": "prettier . --write",

application/frontend/src/App.tsx

@@ -5,11 +5,12 @@ import "@fontsource/roboto/400.css"
 import "@fontsource/roboto/500.css"
 import "@fontsource/roboto/700.css"
 
+import { CONFIG } from "./configs"
 import { AppRouter } from "./routes"
 
 function App() {
   return (
-    <BrowserRouter>
+    <BrowserRouter basename={CONFIG.basename}>
       <AppRouter />
     </BrowserRouter>
   )

application/frontend/src/configs/index.ts

@@ -0,0 +1,3 @@
+export const CONFIG = {
+  basename: import.meta.env.VITE_BASENAME ?? "/",
+}

application/frontend/src/locales/service.ts

@@ -1,9 +1,10 @@
 import { createInstance } from "i18next"
 import I18NextHttpBackend from "i18next-http-backend"
+import { CONFIG } from "src/configs"
 
 const i18nInstance = createInstance({
   backend: {
-    loadPath: `${window.location.origin}/public/locales/{{ns}}/{{lng}}.json`,
+    loadPath: `${CONFIG.basename}/public/locales/{{ns}}/{{lng}}.json`,
   },
   fallbackLng: "ru",
   interpolation: {

application/frontend/src/pages/report/Report.tsx

@@ -8,10 +8,10 @@ import { NavButton } from "src/components/NavButton"
 import ReportOverlay from "src/components/ReportOverlay/ReportOverlay"
 import ReportsTable from "src/components/ReportsTable/ReportsTable"
 import { SearchBar } from "src/components/SearchBar"
+import { SettingsButton } from "src/pages/project/Project.styled"
 
 import { Report } from "../../components/ReportsTable/ReportsTable"
 import { Header, StyledContainer, Title } from "./Report.styled"
-import { SettingsButton } from "src/pages/project/Project.styled"
 
 export const ReportPage: React.FC = () => {
   const [searchQuery, setSearchQuery] = useState<string>("")

application/frontend/src/routes/routes.tsx

@@ -1,10 +1,11 @@
 import { RouteObject, useRoutes } from "react-router-dom"
 
-import { Layout } from "../components/Layout/Layout"
-import { Home } from "../pages/Home"
 import { ProjectPage } from "src/pages/project"
 import { ReportPage } from "src/pages/report"
 
+import { Layout } from "../components/Layout/Layout"
+import { Home } from "../pages/Home"
+
 const routes: RouteObject[] = [
   {
     path: "/",

application/frontend/vite.config.ts

@@ -5,5 +5,5 @@ import react from "@vitejs/plugin-react-swc"
 
 export default defineConfig({
   plugins: [react(), tsconfigPaths()],
-  base: process.env.VITE_BASE_URL || '/'
-});
+  base: process.env.VITE_BASENAME || "/",
+})

demo/index.html

@@ -2,11 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="https://digitable-lol.github.io/light-traffic/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/light-traffic/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
-    <script type="module" crossorigin src="https://digitable-lol.github.io/light-traffic/assets/index-Bc41vKJH.js"></script>
-    <link rel="stylesheet" crossorigin href="https://digitable-lol.github.io/light-traffic/assets/index-ChFl1CfJ.css">
+    <script type="module" crossorigin src="/light-traffic/assets/index-hj_tHHAL.js"></script>
+    <link rel="stylesheet" crossorigin href="/light-traffic/assets/index-PCWEMyLj.css">
   </head>
   <body>
     <div id="root"></div>