From 24ddec41dd7dce8905729ebef87cd0b011164122 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Sun, 18 Jan 2026 17:58:10 +0000
Subject: [PATCH] Add base path configuration for GitHub Pages deployment

Co-authored-by: johndoe6345789 <224850594+johndoe6345789@users.noreply.github.com>
---
 .github/workflows/deploy-pages.yml |  1 +
 docs/CI-CD.md                      | 18 ++++++++++--------
 vite.config.ts                     |  4 ++++
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml
index e2cd074..755891f 100644
--- a/.github/workflows/deploy-pages.yml
+++ b/.github/workflows/deploy-pages.yml
@@ -35,6 +35,7 @@ jobs:
         run: npm run build
         env:
           VITE_FLASK_BACKEND_URL: ${{ vars.VITE_FLASK_BACKEND_URL || '' }}
+          VITE_BASE_PATH: ${{ vars.VITE_BASE_PATH || '/' }}
 
       - name: Setup Pages
         uses: actions/configure-pages@v4
diff --git a/docs/CI-CD.md b/docs/CI-CD.md
index c518a70..7012f5e 100644
--- a/docs/CI-CD.md
+++ b/docs/CI-CD.md
@@ -64,16 +64,15 @@ This workflow builds the frontend application and deploys it to GitHub Pages.
    - Go to repository Settings → Pages
    - Under "Build and deployment", select "Source: GitHub Actions"
 
-2. **Configure Base Path (if needed):**
+2. **Configure Base Path:**
    
-   If your repository is not deployed to the root domain, you may need to configure the base path in `vite.config.ts`:
+   Set the `VITE_BASE_PATH` repository variable for proper asset loading:
+   - For deployment at `https://<username>.github.io/<repo>/`, set: `/snippet-pastebin/`
+   - For custom domain or root deployment, set: `/`
    
-   ```typescript
-   export default defineConfig({
-     base: '/snippet-pastebin/', // Replace with your repo name
-     // ... rest of config
-   });
-   ```
+   Go to Settings → Secrets and variables → Actions → Variables → New repository variable
+   - Name: `VITE_BASE_PATH`
+   - Value: `/snippet-pastebin/` (or your repository name)
 
 3. **Optional Configuration:**
    - Set `VITE_FLASK_BACKEND_URL` as a repository variable if you want to connect to a backend
@@ -90,6 +89,9 @@ After the workflow runs successfully, your site will be available at:
 
 Set these variables in your repository settings (Settings → Secrets and variables → Actions → Variables):
 
+- `VITE_BASE_PATH` (recommended for GitHub Pages): Base path for the application
+  - Example: `/snippet-pastebin/` for `username.github.io/snippet-pastebin/`
+  - Use `/` for custom domains or root deployment
 - `VITE_FLASK_BACKEND_URL` (optional): URL of your Flask backend API
   - Example: `https://api.example.com`
   - If not set, the app will use local IndexedDB storage
diff --git a/vite.config.ts b/vite.config.ts
index a548718..a73d354 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -10,6 +10,10 @@ const projectRoot = process.env.PROJECT_ROOT || import.meta.dirname
 
 // https://vite.dev/config/
 export default defineConfig({
+  // Base path for GitHub Pages deployment
+  // Set to '/' for custom domain or root deployment
+  // Set to '/repo-name/' for GitHub Pages at username.github.io/repo-name/
+  base: process.env.VITE_BASE_PATH || '/',
   plugins: [
     react(),
     tailwindcss(),