@salesforce/webapp-template-base-react-app-experimental 1.22.0 → 1.23.0

package/src/force-app/main/default/webapplications/base-react-app/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
+    "build:e2e": "npm run build && node scripts/rewrite-e2e-assets.mjs",
     "lint": "eslint .",
     "preview": "vite preview",
     "test": "vitest"
@@ -37,6 +38,8 @@
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
-    "vitest": "^4.0.17"
+    "vitest": "^4.0.17",
+    "@playwright/test": "^1.49.0",
+    "serve": "^14.2.5"
   }
 }

package/src/force-app/main/default/webapplications/base-react-app/playwright.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const E2E_PORT = 5175;
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: `http://localhost:${E2E_PORT}`,
+    trace: 'on-first-retry',
+  },
+  projects: [{ name: 'chromium', use: { ...devices['Desktop Chrome'] } }],
+  webServer: {
+    // Serve built dist/ with static server so e2e works in CI without SF org (vite preview runs plugin and can fail)
+    command: `npx serve dist -l ${E2E_PORT}`,
+    url: `http://localhost:${E2E_PORT}`,
+    reuseExistingServer: !process.env.CI,
+    timeout: process.env.CI ? 120_000 : 60_000,
+  },
+});

package/src/force-app/main/default/webapplications/base-react-app/scripts/rewrite-e2e-assets.mjs

@@ -0,0 +1,23 @@
+/**
+ * Prepares dist/ for e2e: root-relative asset paths + SPA fallback for serve.
+ */
+import { readFileSync, writeFileSync } from 'node:fs';
+import { join, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const distDir = join(__dirname, '..', 'dist');
+
+// Rewrite index.html so asset paths are root-relative (/assets/...)
+const indexPath = join(distDir, 'index.html');
+let html = readFileSync(indexPath, 'utf8');
+html = html.replace(/(src|href)="[^"]*\/assets\//g, '$1="/assets/');
+writeFileSync(indexPath, html);
+
+// SPA fallback so /about, /non-existent-route etc. serve index.html
+writeFileSync(
+  join(distDir, 'serve.json'),
+  JSON.stringify({
+    rewrites: [{ source: '**', destination: '/index.html' }],
+  })
+);