feat: add environment-aware base path configuration:

- Configure dynamic base path for local (/) and production (/test-abb/)
- Update Vite config to use VITE_BASE_PATH environment variable
- Make React Router basename dynamic using BASE_URL
- Add build args support in Dockerfile for different environments
- Update CI/CD workflow to set base path for GitHub Pages deployment
- Simplify README to focus on Docker deployment
- Enhance .gitignore with comprehensive exclusions

Author: LuisMLGDev

.github/workflows/ci-cd.yml

@@ -31,6 +31,8 @@ jobs:
         run: yarn lint
 
       - name: Build
+        env:
+          VITE_BASE_PATH: /test-abb/
         run: yarn build
 
       - name: Cypress run
@@ -96,6 +98,8 @@ jobs:
         with:
           context: .
           push: true
+          build-args: |
+            VITE_BASE_PATH=/test-abb/
           # Using the lowercase environment variable to ensure push success
           tags: |
             ghcr.io/${{ env.REPO_OWNER }}/test-abb:latest

Dockerfile

@@ -1,6 +1,9 @@
 # Build Stage
 FROM node:20-alpine as build
 WORKDIR /app
+# Accept build argument for base path (defaults to / for local development)
+ARG VITE_BASE_PATH=/
+ENV VITE_BASE_PATH=$VITE_BASE_PATH
 COPY package.json yarn.lock ./
 RUN yarn install --frozen-lockfile
 COPY . .

README.md

@@ -56,29 +56,17 @@ graph LR
 ### Prerequisites
 
 * Docker & Docker Compose
-* Node.js (v20+) (Optional, for local non-docker dev)
 
-### Option A: Run with Docker (Recommended)
+### Run with Docker
 
-This mirrors the production environment using the optimized Nginx image.
+This uses the optimized multi-stage Dockerfile with Nginx to serve the production build.
 
 ```bash
 # 1. Build and start the container
 docker compose up --build
-
-# 2. Access the application
-# Open http://localhost:8080
-
 ```
 
-### Option B: Local Development
-
-To run the application using the local Node.js environment:
-
-```bash
-yarn install
-yarn dev
-```
+**2. Access the application at: [http://localhost:8080](http://localhost:8080)**
 
 ### Stopping Docker Containers
 

src/main.tsx

@@ -6,7 +6,7 @@ import { BrowserRouter } from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <BrowserRouter basename="/test-abb">
+    <BrowserRouter basename={import.meta.env.BASE_URL}>
       <App />
     </BrowserRouter>
   </React.StrictMode>

vite.config.ts

@@ -4,5 +4,6 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: "/test-abb/",
+  // Use /test-abb/ for GitHub Pages, / for local development
+  base: process.env.VITE_BASE_PATH || "/",
 })