[Bug] [Demo App V1] Removing one product from the listing

.github/workflows/static.yml

@@ -21,8 +21,89 @@ concurrency:
   cancel-in-progress: false
 
 jobs:
-  # Single deploy job since we're just deploying
-  deploy:
+  # Deploy for non-main branches (no protected environment)
+  deploy_unprotected:
+    if: github.ref != 'refs/heads/main'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18'
+
+      - name: Install dependencies
+        run: |
+          # Ensure required native deps for image optimization binaries (pngquant) are present
+          sudo apt-get update && sudo apt-get install -y libpng-dev build-essential pkg-config || true
+          # Avoid installing optional native binaries that sometimes fail in CI
+          export npm_config_optional=false
+          if [ -f package-lock.json ]; then npm ci; else npm install; fi
+
+      - name: Determine deploy subpath
+        id: vars
+        run: |
+          BRANCH=${GITHUB_REF#refs/heads/}
+          # Default folder for main is root (no vX prefix). For demo branches map to v1..v5
+          case "$BRANCH" in
+            demo_app_v1) SUBPATH="v1";;
+            demo_app_v2) SUBPATH="v2";;
+            demo_app_v3) SUBPATH="v3";;
+            demo_app_v4) SUBPATH="v4";;
+            demo_app_v5) SUBPATH="v5";;
+            main) SUBPATH="";;
+            *) SUBPATH="";;
+          esac
+          echo "subpath=$SUBPATH" >> $GITHUB_OUTPUT
+
+      - name: Build
+        env:
+          BASE_PATH: ${{ steps.vars.outputs.subpath }}
+        run: |
+          # Compute a single deploy base that always ends with a trailing slash
+          # Use repository name as base (strip organization) so site is published under the repo path
+          REPO_NAME=${GITHUB_REPOSITORY#*/}
+          if [ -n "$BASE_PATH" ]; then
+            DEPLOY_BASE="/${REPO_NAME}/${BASE_PATH}/"
+          else
+            DEPLOY_BASE="/${REPO_NAME}/"
+          fi
+
+          # Export to the build-tool env names expected by the project
+          export PUBLIC_URL="$DEPLOY_BASE"
+          export VITE_BASE_PATH="$DEPLOY_BASE"
+          echo "Building with DEPLOY_BASE=$DEPLOY_BASE"
+
+          # Print the expected GitHub Pages URL to make verification easier
+          OWNER=${GITHUB_REPOSITORY%%/*}
+          REPO=${GITHUB_REPOSITORY#*/}
+          # strip possible .git (unlikely in GITHUB_REPOSITORY but safe)
+          REPO=$(basename -s .git "$REPO")
+          # Construct URL without trailing slash
+          EXPECTED_URL="https://${OWNER}.github.io/${REPO}${DEPLOY_BASE%/}"
+          echo "Expected Pages URL: $EXPECTED_URL"
+
+          npm run build
+          # Ensure SPA routes work on GitHub Pages by providing a 404 fallback
+          if [ -f dist/index.html ]; then cp dist/index.html dist/404.html || true; fi
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload build artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./dist
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+
+  # Deploy for main branch (keeps environment protections)
+  deploy_protected:
+    if: github.ref == 'refs/heads/main'
     environment:
       name: github-pages
       url: ${{ steps.deployment.outputs.page_url }}
@@ -38,6 +119,10 @@ jobs:
 
       - name: Install dependencies
         run: |
+          # Ensure required native deps for image optimization binaries (pngquant) are present
+          sudo apt-get update && sudo apt-get install -y libpng-dev build-essential pkg-config || true
+          # Avoid installing optional native binaries that sometimes fail in CI
+          export npm_config_optional=false
           if [ -f package-lock.json ]; then npm ci; else npm install; fi
 
       - name: Determine deploy subpath
@@ -59,29 +144,38 @@ jobs:
       - name: Build
         env:
           BASE_PATH: ${{ steps.vars.outputs.subpath }}
-          APP_BASE: browserstack-demo-app
         run: |
           # Compute a single deploy base that always ends with a trailing slash
+          # Use repository name as base (strip organization) so site is published under the repo path
+          REPO_NAME=${GITHUB_REPOSITORY#*/}
           if [ -n "$BASE_PATH" ]; then
-            DEPLOY_BASE="/${APP_BASE}/${BASE_PATH}/"
+            DEPLOY_BASE="/${REPO_NAME}/${BASE_PATH}/"
           else
-            DEPLOY_BASE="/${APP_BASE}/"
+            DEPLOY_BASE="/${REPO_NAME}/"
           fi
 
           # Export to the build-tool env names expected by the project
           export PUBLIC_URL="$DEPLOY_BASE"
           export VITE_BASE_PATH="$DEPLOY_BASE"
           echo "Building with DEPLOY_BASE=$DEPLOY_BASE"
+          # Print the expected GitHub Pages URL to make verification easier
+          OWNER=${GITHUB_REPOSITORY%%/*}
+          REPO=${GITHUB_REPOSITORY#*/}
+          REPO=$(basename -s .git "$REPO")
+          EXPECTED_URL="https://${OWNER}.github.io/${REPO}${DEPLOY_BASE%/}"
+          echo "Expected Pages URL: $EXPECTED_URL"
 
           npm run build
+          # Ensure SPA routes work on GitHub Pages by providing a 404 fallback
+          if [ -f dist/index.html ]; then cp dist/index.html dist/404.html || true; fi
 
       - name: Setup Pages
         uses: actions/configure-pages@v5
 
       - name: Upload build artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: ./build
+          path: ./dist
 
       - name: Deploy to GitHub Pages
         id: deployment

index.html

@@ -4,14 +4,14 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>browserstack-demo</title>
-    <meta name="description" content="Browserstack Demo Project" />
+    <meta name="description" content="Test Case Selection Demo Project" />
     <meta name="author" content="cia-dev" />
 
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta property="og:title" content="Browserstack Demo" />
-    <meta property="og:description" content="Browserstack Demo Project" />
+    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
+    <meta property="og:title" content="Test Case Selection Demo" />
+    <meta property="og:description" content="Test Case Selection Demo Project" />
     <meta property="og:type" content="website" />
-    <meta property="og:image" content="/favicon.svg" />
+    <meta property="og:image" content="./favicon.svg" />
 
     <!-- GitHub Pages SPA redirect handling -->
     <script>
@@ -30,6 +30,6 @@
 
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="./src/main.tsx"></script>
   </body>
 </html>

package.json

@@ -1,17 +1,14 @@
 {
-  "name": "browserstack-demo-app",
+  "name": "test-selection-demo-app-browserstack",
   "version": "0.0.0",
   "type": "module",
-  "homepage": "https://browserstack.github.io/browserstack-demo-app",
+  "homepage": "https://browserstack.github.io/test-selection-demo-app-browserstack/",
   "scripts": {
     "predeploy": "npm run build",
     "deploy": "gh-pages -d dist",
     "dev": "vite",
     "build": "vite build",
     "build:dev": "vite build --mode development",
-    "build:v1": "cross-env VITE_BASE_PATH=/browserstack-demo-app/v1/ vite build",
-    "build:v2": "cross-env VITE_BASE_PATH=/browserstack-demo-app/v2/ vite build",
-    "build:v3": "cross-env VITE_BASE_PATH=/browserstack-demo-app/v3/ vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },

public/404.html

@@ -3,24 +3,26 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Loading...</title>
+    <title>Redirecting...</title>
     <script>
-      // Surge serves 404.html for unknown routes unless a 200 fallback is provided.
-      // Instead of mutating the URL (which produced /?/… redirects), load the main
-      // SPA shell in-place so React Router can hydrate the correct route.
-      fetch('/index.html', { credentials: 'same-origin' })
-        .then((response) => response.text())
-        .then((html) => {
-          document.open();
-          document.write(html);
-          document.close();
-        })
-        .catch(() => {
-          window.location.replace('/');
-        });
+      // SPA redirect for GitHub Pages: move path into query so index.html can restore it
+      (function () {
+        var l = window.location;
+        // derive base path like /owner/repo or /repo depending on hosting
+        var parts = l.pathname.split('/').filter(Boolean);
+        // assume repo is the first path segment when hosted on browserstack.github.io
+        var repoIndex = parts.indexOf('test-selection-demo-app-browserstack');
+        var base = '/test-selection-demo-app-browserstack/';
+        // If repo not found, fall back to root
+        if (repoIndex === -1) {
+          base = '/';
+        }
+        var newPath = base + '?/' + l.pathname.slice(base.length).replace(/&/g, '~and~') + (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') + l.hash;
+        l.replace(l.protocol + '//' + l.host + newPath);
+      })();
     </script>
   </head>
   <body>
-    <p>Loading the application…</p>
+    <p>Redirecting to the app...</p>
   </body>
 </html>

src/App.tsx

@@ -120,7 +120,7 @@ const App = () => (
     <CartProvider>
       <QueryClientProvider client={queryClient}>
         <TooltipProvider>
-          <BrowserRouter>
+          <BrowserRouter basename={import.meta.env.BASE_URL}>
             <AppContent />
           </BrowserRouter>
         </TooltipProvider>

src/data/products.ts

@@ -91,15 +91,5 @@ export const products = [
     description: 'Samsung Galaxy S20+ with Snapdragon 865, 6.7-inch Dynamic AMOLED, quad camera system.',
     image: getAssetPath('/static/products/samsung-S20+.png'),
     rating: { rate: 4.7, count: 160 }
-  },
-  {
-    id: 10,
-    title: 'Samsung Galaxy S20 Ultra',
-    price: 999.99,
-    category: 'android',
-    os: 'android',
-    description: 'Samsung Galaxy S20 Ultra with Snapdragon 865, 6.9-inch Dynamic AMOLED, 108MP camera.',
-    image: getAssetPath('/static/products/samsung-S20Ultra.png'),
-    rating: { rate: 4.8, count: 175 }
   }
 ];