feat: support for parametrizing the base path #335 #836 #800

ui/.env.production

@@ -1,4 +1,5 @@
 TSC_COMPILE_ON_ERROR=true
 ESLINT_NO_DEV_ERRORS=true
-PUBLIC_URL = /
-REACT_APP_API_URL = /
+PUBLIC_URL=/
+REACT_APP_API_URL=/
+REACT_APP_BASE_URL=/test

ui/package.json

@@ -5,7 +5,7 @@
   "homepage": "/",
   "scripts": {
     "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
+    "build": "node ./scripts/env.js && react-app-rewired build",
     "lint": "eslint . --cache --fix --ext .ts,.tsx",
     "prettier": "prettier --write 'src/**/*.{js,jsx,ts,tsx,json,css,scss,md}' --config ./.prettierrc.json",
     "pre-install": "node ./scripts/preinstall.js && pnpm install",
@@ -76,6 +76,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "humps": "^2.0.1",
     "husky": "^8.0.1",
+    "js-yaml": "^4.1.0",
     "lint-staged": "^13.2.3",
     "postcss": "^8.0.0",
     "prettier": "^3.1.0",

ui/scripts/env.js

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const path = require('path');
+const yaml = require('js-yaml');
+
+const configFilePath = path.resolve(__dirname, '../../configs/config.yaml');
+const envFilePath = path.resolve(__dirname, '../.env.production');
+
+// Read config.yaml file
+const config = yaml.load(fs.readFileSync(configFilePath, 'utf8'));
+
+// Generate .env file content
+let envContent = 'TSC_COMPILE_ON_ERROR=true\nESLINT_NO_DEV_ERRORS=true\n';
+for (const key in config.ui) {
+  const value = config.ui[key];
+  envContent += `${key.toUpperCase()}=${value}\n`;
+}
+
+// Write .env file
+fs.writeFileSync(envFilePath, envContent);
+
+console.log(`Generated ${envFilePath}`);

ui/src/App.tsx

@@ -25,7 +25,9 @@ import '@/utils/pluginKit';
 import routes from '@/router';
 
 function App() {
-  const router = createBrowserRouter(routes);
+  const router = createBrowserRouter(routes, {
+    basename: process.env.REACT_APP_BASE_URL,
+  });
   return <RouterProvider router={router} />;
 }