@salesforce/webapp-template-base-react-app-experimental 1.33.3 → 1.33.5

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.33.5](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.33.4...v1.33.5) (2026-02-18)
+
+### Bug Fixes
+
+- base-react-app: router basename, nav layout, and import path ([#122](https://github.com/salesforce-experience-platform-emu/webapps/issues/122)) ([ad6d3e5](https://github.com/salesforce-experience-platform-emu/webapps/commit/ad6d3e5bbee84eb0b524128bbc89a0f5f7c01595))
+
+## [1.33.4](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.33.3...v1.33.4) (2026-02-17)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-react-app-experimental
+
 ## [1.33.3](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.33.2...v1.33.3) (2026-02-17)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-react-app-experimental

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-react-app-experimental",
-  "version": "1.33.3",
+  "version": "1.33.5",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {
     "access": "public"
@@ -15,5 +15,5 @@
     "test:coverage": "npm run test:e2e",
     "test:e2e": "cd src/force-app/main/default/webapplications/base-react-app && rm -rf node_modules && npm ci && npx playwright install chromium && npm run build:e2e && npx playwright test"
   },
-  "gitHead": "478e8511c58c7e4f0b45f2f36dcdaa3fe40c8d40"
+  "gitHead": "d23795615e716c723701b285cf0f84a0c94ff6fe"
 }

package/src/force-app/main/default/webapplications/base-react-app/build/vite.config.js

@@ -7,6 +7,8 @@ import salesforce from '@salesforce/vite-plugin-webapp-experimental';
 export default defineConfig(function (_a) {
     var mode = _a.mode;
     return {
+        // Ensure root base for e2e/static serve; plugin may override when deployed under a path
+        base: '/',
         plugins: [tailwindcss(), react(), salesforce()],
         // Build configuration for MPA
         build: {

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

@@ -4,7 +4,16 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import './styles/global.css';
 
-const router = createBrowserRouter(routes);
+// Match Vite base so client-side routes work when deployed under a path (e.g. /lwr/application/ai/c-webapp2/).
+// When served at root (e.g. e2e with static serve), use '/' so routes match.
+const base = (import.meta.env.BASE_URL ?? '/').replace(/\/$/, '') || '/';
+const basename =
+  typeof window !== 'undefined' &&
+  (window.location.pathname === '/' ||
+    !window.location.pathname.startsWith('/lwr/'))
+    ? '/'
+    : base;
+const router = createBrowserRouter(routes, { basename });
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

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

@@ -1,9 +1,29 @@
-import { Outlet } from 'react-router';
+import { Outlet, NavLink } from 'react-router';
+
+const navLinkClass = ({ isActive }: { isActive: boolean }) =>
+  `text-sm font-medium ${isActive ? 'text-gray-900' : 'text-gray-600 hover:text-gray-900'}`;
 
 export default function AppLayout() {
   return (
     <>
-      <Outlet />
+      <nav className="sticky top-0 z-10 border-b border-gray-200 bg-white">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="flex h-14 items-center gap-8">
+            <NavLink to="/" end className={navLinkClass}>
+              Home
+            </NavLink>
+            <NavLink to="/about" className={navLinkClass}>
+              About
+            </NavLink>
+            <NavLink to="/does-not-exist" className={navLinkClass}>
+              404
+            </NavLink>
+          </div>
+        </div>
+      </nav>
+      <main>
+        <Outlet />
+      </main>
     </>
   );
 }

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

@@ -1,6 +1,6 @@
 import type { RouteObject } from 'react-router';
 import AppLayout from '@/appLayout';
-import Home from '@/pages/Home';
+import Home from './pages/Home';
 import About from './pages/About';
 import NotFound from './pages/NotFound';
 

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

@@ -7,6 +7,8 @@ import salesforce from '@salesforce/vite-plugin-webapp-experimental';
 
 export default defineConfig(({ mode }) => {
   return {
+    // Ensure root base for e2e/static serve; plugin may override when deployed under a path
+    base: '/',
     plugins: [tailwindcss(), react(), salesforce()],
 
     // Build configuration for MPA