Update GitHub Actions: Set PUBLIC_URL dynamically for branch-based deployment

Author: elainefan331

.github/workflows/build-deploy-zodiac.yml

@@ -19,8 +19,10 @@ jobs:
       - name: Install dependencies
         run: yarn install --frozen-lockfile
 
-      - name: Build React App
-        run: yarn build
+      - name: Build React App with Dynamic PUBLIC_URL
+        run: |
+          echo "Building for /dev/${{ env.BRANCH_NAME}}/"
+          PUBLIC_URL="/dev/${{ env.BRANCH_NAME}}/" yarn build
 
       - name: Determine Branch Name
         id: get_branch

src/App.tsx

@@ -4,13 +4,13 @@ import theme from "design/theme";
 import { BrowserRouter } from "react-router-dom";
 
 const App = () => {
-	return (
-		<ThemeProvider theme={theme}>
-			<BrowserRouter>
-				<Routes />
-			</BrowserRouter>
-		</ThemeProvider>
-	);
+  return (
+    <ThemeProvider theme={theme}>
+      <BrowserRouter basename={process.env.PUBLIC_URL}>
+        <Routes />
+      </BrowserRouter>
+    </ThemeProvider>
+  );
 };
 
 export default App;