@salesforce/webapp-template-feature-micro-frontend 1.30.0

package/dist/force-app/main/default/webapplications/feature-micro-frontend/src/pages/Home.tsx

@@ -0,0 +1,12 @@
+export default function Home() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">Home</h1>
+        <p className="text-lg text-gray-600 mb-8">
+          Welcome to your React application.
+        </p>
+      </div>
+    </div>
+  );
+}

package/dist/force-app/main/default/webapplications/feature-micro-frontend/src/pages/NotFound.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'react-router';
+
+export default function NotFound() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">404</h1>
+        <p className="text-lg text-gray-600 mb-8">Page not found</p>
+        <Link
+          to="/"
+          className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+        >
+          Go to Home
+        </Link>
+      </div>
+    </div>
+  );
+}

package/dist/force-app/main/default/webapplications/feature-micro-frontend/src/routes.tsx

@@ -0,0 +1,28 @@
+import type { RouteObject } from 'react-router';
+import AppLayout from '@/appLayout';
+import Home from '@/pages/Home';
+import About from './pages/About';
+import NotFound from './pages/NotFound';
+
+export const routes: RouteObject[] = [
+  {
+    path: '/',
+    element: <AppLayout />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+        handle: { showInNavigation: true, label: 'Home' },
+      },
+      {
+        path: 'about',
+        element: <About />,
+        handle: { showInNavigation: true, label: 'About' },
+      },
+      {
+        path: '*',
+        element: <NotFound />,
+      },
+    ],
+  },
+];

package/dist/force-app/main/default/webapplications/feature-micro-frontend/src/styles/global.css

@@ -0,0 +1,13 @@
+@import 'tailwindcss';
+
+@layer base {
+  html,
+  body,
+  #root {
+    @apply min-h-screen;
+  }
+
+  body {
+    @apply antialiased bg-white;
+  }
+}

package/dist/force-app/main/default/webapplications/feature-micro-frontend/tsconfig.json

@@ -0,0 +1,36 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@api/*": ["./src/api/*"],
+      "@components/*": ["./src/components/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@styles/*": ["./src/styles/*"],
+      "@assets/*": ["./src/assets/*"]
+    }
+  },
+  "include": ["src", "vite-env.d.ts", "vitest-env.d.ts"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/dist/force-app/main/default/webapplications/feature-micro-frontend/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "outDir": "./build"
+  },
+  "include": ["vite.config.ts"]
+}

package/dist/force-app/main/default/webapplications/feature-micro-frontend/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/dist/force-app/main/default/webapplications/feature-micro-frontend/vite.config.ts

@@ -0,0 +1,83 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import { resolve } from 'path';
+import tailwindcss from '@tailwindcss/vite';
+import salesforce from '@salesforce/vite-plugin-webapp-experimental';
+
+export default defineConfig(({ mode }) => {
+  return {
+    plugins: [tailwindcss(), react(), salesforce()],
+
+    // Build configuration for MPA
+    build: {
+      outDir: resolve(__dirname, 'dist'),
+      assetsDir: 'assets',
+      sourcemap: false,
+    },
+
+    // Resolve aliases (shared between build and test)
+    resolve: {
+      dedupe: ['react', 'react-dom'],
+      alias: {
+        '@': path.resolve(__dirname, './src'),
+        '@api': path.resolve(__dirname, './src/api'),
+        '@components': path.resolve(__dirname, './src/components'),
+        '@utils': path.resolve(__dirname, './src/utils'),
+        '@styles': path.resolve(__dirname, './src/styles'),
+        '@assets': path.resolve(__dirname, './src/assets'),
+      },
+    },
+
+    // Vitest configuration
+    test: {
+      // Override root for tests (build uses src/pages as root)
+      root: resolve(__dirname),
+
+      // Use jsdom environment for React component testing
+      environment: 'jsdom',
+
+      // Setup files to run before each test
+      setupFiles: ['./src/test/setup.ts'],
+
+      // Global test patterns
+      include: [
+        'src/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
+        'src/**/__tests__/**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}',
+      ],
+
+      // Coverage configuration
+      coverage: {
+        provider: 'v8',
+        reporter: ['text', 'html', 'clover', 'json'],
+        exclude: [
+          'node_modules/',
+          'src/test/',
+          'src/**/*.d.ts',
+          'src/main.tsx',
+          'src/vite-env.d.ts',
+          'src/components/**/index.ts',
+          '**/*.config.ts',
+          'build/',
+          'dist/',
+          'coverage/',
+          'eslint.config.js',
+        ],
+        thresholds: {
+          global: {
+            branches: 85,
+            functions: 85,
+            lines: 85,
+            statements: 85,
+          },
+        },
+      },
+
+      // Test timeout
+      testTimeout: 10000,
+
+      // Globals for easier testing
+      globals: true,
+    },
+  };
+});

package/dist/force-app/main/default/webapplications/feature-micro-frontend/vitest-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vitest" />
+/// <reference types="@testing-library/jest-dom" />

package/dist/force-app/main/default/webapplications/feature-micro-frontend/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './vitest.setup.ts',
+  },
+});

package/dist/force-app/main/default/webapplications/feature-micro-frontend/vitest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/dist/force-app/main/default/webapplications/feature-micro-frontend/webapplication.json

@@ -0,0 +1,7 @@
+{
+  "outputDir": "dist",
+  "routing": {
+    "trailingSlash": "never",
+    "fallback": "/index.html"
+  }
+}

package/dist/jest.config.js

@@ -0,0 +1,6 @@
+const { jestConfig } = require('@salesforce/sfdx-lwc-jest/config');
+
+module.exports = {
+    ...jestConfig,
+    modulePathIgnorePatterns: ['<rootDir>/.localdevserver']
+};

package/dist/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
+  "version": "1.30.0",
+  "description": "Base SFDX project template",
+  "private": true,
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "echo 'No build required for base-sfdx-project'",
+    "clean": "echo 'No clean required for base-sfdx-project'",
+    "lint": "eslint **/{aura,lwc}/**/*.js",
+    "test": "npm run test:unit",
+    "test:unit": "sfdx-lwc-jest -- --passWithNoTests",
+    "test:unit:watch": "sfdx-lwc-jest --watch",
+    "test:unit:debug": "sfdx-lwc-jest --debug",
+    "test:unit:coverage": "sfdx-lwc-jest --coverage",
+    "prettier": "prettier --write \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
+    "prettier:verify": "prettier --check \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
+    "precommit": "lint-staged",
+    "generate": "node ../../../../micro-frontends/dist/cli.js generate-micro-frontend feature-micro-frontend"
+  },
+  "devDependencies": {
+    "@lwc/eslint-plugin-lwc": "^2.0.0",
+    "@prettier/plugin-xml": "^3.2.2",
+    "@salesforce/eslint-config-lwc": "^3.2.3",
+    "@salesforce/eslint-plugin-aura": "^2.0.0",
+    "@salesforce/eslint-plugin-lightning": "^1.0.0",
+    "@salesforce/sfdx-lwc-jest": "^7.0.1",
+    "eslint": "8.57.1",
+    "eslint-plugin-import": "^2.25.4",
+    "eslint-plugin-jest": "^28.8.1",
+    "husky": "^9.1.5",
+    "lint-staged": "^15.1.0",
+    "prettier": "^3.1.0",
+    "prettier-plugin-apex": "^2.0.1"
+  }
+}

package/dist/scripts/apex/hello.apex

@@ -0,0 +1,10 @@
+// Use .apex files to store anonymous Apex.
+// You can execute anonymous Apex in VS Code by selecting the
+//     apex text and running the command:
+//     SFDX: Execute Anonymous Apex with Currently Selected Text
+// You can also execute the entire file by running the command:
+//     SFDX: Execute Anonymous Apex with Editor Contents
+
+string tempvar = 'Enter_your_name_here';
+System.debug('Hello World!');
+System.debug('My name is ' + tempvar);

package/dist/scripts/soql/account.soql

@@ -0,0 +1,6 @@
+// Use .soql files to store SOQL queries.
+// You can execute queries in VS Code by selecting the
+//     query text and running the command:
+//     SFDX: Execute SOQL Query with Currently Selected Text
+
+SELECT Id, Name FROM Account

package/dist/sfdx-project.json

@@ -0,0 +1,12 @@
+{
+  "packageDirectories": [
+    {
+      "path": "force-app",
+      "default": true
+    }
+  ],
+  "name": "MyProject",
+  "namespace": "",
+  "sfdcLoginUrl": "https://login.salesforce.com",
+  "sourceApiVersion": "66.0"
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@salesforce/webapp-template-feature-micro-frontend",
+  "version": "1.30.0",
+  "description": "Micro Frontend generation feature for Web Applications",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "author": "",
+  "type": "module",
+  "main": "index.js",
+  "files": [
+    "dist",
+    "skills"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npx tsx ../../cli/src/index.ts apply-patches packages/template/feature/feature-micro-frontend packages/template/base-app/base-react-app packages/template/feature/feature-micro-frontend/dist --reset",
+    "postbuild": "node -e \"const fs=require('fs');const p='dist/package.json';const pkg=JSON.parse(fs.readFileSync(p));pkg.scripts.generate='node ../../../../micro-frontends/dist/cli.js generate-micro-frontend feature-micro-frontend';fs.writeFileSync(p,JSON.stringify(pkg,null,2)+'\\n')\"",
+    "clean": "rm -rf dist",
+    "dev": "cd dist/force-app/main/default/webapplications/feature-micro-frontend && npm install && npm run dev",
+    "watch": "npx tsx ../../cli/src/index.ts watch-patches packages/template/feature/feature-micro-frontend packages/template/base-app/base-react-app packages/template/feature/feature-micro-frontend/dist"
+  },
+  "devDependencies": {
+    "@salesforce/micro-frontends-experimental": "^1.30.0",
+    "@salesforce/webapp-experimental": "^1.30.0",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "react-dom": "^19.2.1",
+    "vite": "^7.3.1"
+  },
+  "gitHead": "544598e5263d2ea42f968854afb609359f5053b4"
+}

package/skills/micro-frontend/SKILL.md

@@ -0,0 +1,137 @@
+---
+name: micro-frontends
+description: Generate a Micro Frontend LWC component for a Web Application.
+license: Proprietary. LICENSE.txt has complete terms
+metadata:
+  author: salesforce-experience-platform-emu/lwc-admins
+---
+
+# Micro Frontend generation (workflow)
+
+When the user wants a Micro Frontend for a Web Application, follow this workflow.
+
+## 1. Install the dependency
+
+Micro Frontends are generated using the `generate-micro-frontend` CLI command from the `@salesforce/micro-frontends-experimental` package.
+
+```bash
+npm install @salesforce/micro-frontends-experimental
+```
+
+The dependency should be added to the project's `package.json` dependencies.
+
+## 2. Identify the Web Application
+
+- Verify the Web Application exists in `force-app/main/default/webapplications/<web-app-name>/`.
+- Confirm the Web Application has a `lightningOut` target in its `webapplication-meta.xml` file.
+- If no Web Application exists, the user must create one first using the Web Apps template system.
+
+## 3. Generate the Micro Frontend component
+
+Run the `generate-micro-frontend` command with the Web Application name from the root of an SFDX project:
+
+```bash
+npx generate-micro-frontend <web-app-name>
+```
+
+This creates:
+
+- A custom wrapper LWC component in `force-app/main/default/lwc/<webAppName>/`. This is the "Micro Frontend component".
+- The static `microFrontendShell` component that handles iframe communication.
+
+Notes:
+
+- The command may be added to the project's `package.json` scripts for convenience.
+- The Micro Frontend component uses the Web Application name (e.g. `my-web-app/`) in camelCase for its folder and file names (e.g. `myWebApp/myWebApp.js`, `myWebApp/myWebApp.html`).
+
+## 4. Customize the Micro Frontend component metadata
+
+Edit the `<webAppName>.js-meta.xml` file to:
+
+- Set appropriate `targets` (e.g. `lightning__HomePage`, `lightning__AppPage`, `lightning__RecordPage`, `lightningCommunity__Page`)
+- Add `targetConfigs` for page-specific properties
+- Optionally update the `masterLabel` and `description`
+
+Example:
+
+```xml
+<targetConfigs>
+    <targetConfig targets="lightning__HomePage">
+        <property name="height" type="Integer" min="0" max="600" default="300" />
+    </targetConfig>
+</targetConfigs>
+```
+
+## 5. Pass properties to the Micro Frontend component
+
+Edit the `<webAppName>.js` file to customize the `properties` getter:
+
+```javascript
+@api height;
+
+@api get properties() {
+    return {
+        height: this.height,
+        // Add any other data your Web Application needs
+    };
+}
+```
+
+All properties are passed to the embedded Web Application via `postMessage` and can be accessed in the app's code.
+
+## 6. Deploy and test
+
+Deploy the Micro Frontend component using standard SF CLI commands:
+
+```bash
+sf project deploy start --source-dir force-app/main/default
+```
+
+Add the component to a page using Lightning App Builder or Experience Builder and verify it loads correctly.
+
+# Micro Frontend component customization examples
+
+## Record page example
+
+Command to generate a Micro Frontend component for the `my-site` Web Application:
+
+```bash
+npx generate-micro-frontend my-site
+```
+
+`mySite.js-meta.xml` file with a `lightning__RecordPage` target:
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>66.0</apiVersion>
+    <isExposed>true</isExposed>
+    <masterLabel>Micro Frontend for "My Site"</masterLabel>
+    <targets>
+        <target>lightning__RecordPage</target>
+    </targets>
+        <targetConfigs>
+        <targetConfig targets="lightning__RecordPage">
+            <property name="mode" type="String" default="dark" />
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>
+```
+
+`mySite.js` file with public properties and `properties` getter:
+
+```js
+// Micro Frontend component
+export default class mySite extends LightningElement {
+  @api recordId;
+  @api mode;
+
+  @api get properties() {
+    // This data is passed to the Micro Frontend
+    return {
+      recordId: this.recordId, // automatically populated for lightning__RecordPage target
+      mode: this.mode, // matches the mode targetConfig
+    };
+  }
+}
+```