How Do SF Platform Architects Implement Salesforce Micro Frontends Without Framework Lock-In?

SF Platform Architects now deploy React, Angular, or Vue micro-frontends directly into Lightning pages through Salesforce’s Multi-Framework runtime and the new Micro-Frontend (MFE) Developer Preview. The pattern uses sandboxed iframes, the official MFE Bridge, and the Platform SDK so each micro-frontend remains independently deployable and fully portable.

The Lock-In Problem Architects Actually Face

Traditional LWC forces every UI decision into Salesforce-specific markup and lifecycle hooks. When a team later wants to share that component outside Salesforce, migrate to a different frontend stack, or embed it in a non-Salesforce portal, the rewrite cost is high. Micro-frontends solve the opposite problem: they let architects compose multiple independently built and deployed UI bundles while keeping Salesforce as the single source of truth for data, security, and business logic.

The Two Production Patterns in 2026

Pattern 1: Native Multi-Framework Bundles (GA since July 2026)

Build the micro-frontend as a standard React (or upcoming Angular) application. Package it as a UiBundle metadata type and deploy it to the salesforce.app domain. The bundle receives GraphQL, Apex, and UI API access through @salesforce/platform-sdk with zero token management.

Pattern 2: External MFE via LWC Shell (Developer Preview)

Host the micro-frontend on any domain you control. Wrap it with a thin LWC shell that mounts an iframe. The shell and the external app communicate through the @salesforce/experimental-mfe-bridge package. Updates to the micro-frontend ship on your own cadence.

Step-by-Step Implementation (External MFE Pattern)

1. Install the shell package

   npm install --save-dev @sf-embedding/experimental-mfe-lwc-shell@2.2.1-rc.5
   npx lwc-shell-vendor-build
   sf project deploy start --source-dir force-app/main/default/lwc/vendorLwcShell
   

2. Add the external domain to CSP Trusted Sites in Setup.

3. Create the wrapper LWC

   import { LightningElement } from 'lwc';
   
   export default class MfeWrapper extends LightningElement {
     renderedCallback() {
       const container = this.template.querySelector('.mfe-container');
       const shell = document.createElement('lwc-shell');
       shell.sandbox = 'allow-forms allow-modals allow-scripts';
       shell.title = 'Customer Dashboard';
       shell.src = 'https://mfe.acme.com/dashboard';
       container.appendChild(shell);
     }
   }
   

4. In the external React app, install the bridge

   npm install @salesforce/experimental-mfe-bridge@2.2.1-rc.2
   

   The bridge automatically syncs theme tokens, user context, and fires events back into the Lightning page.

Avoiding Framework Lock-In

• Use the Platform SDK instead of any Salesforce-specific React wrapper. The SDK exposes only standard GraphQL and Apex endpoints.
• Keep all business logic in Apex or Flow so the frontend can be swapped without touching core processes.
• Deploy each micro-frontend to its own repository and CI pipeline. The LWC shell or UiBundle is the only Salesforce metadata.
• Document the contract between shell and micro-frontend (events, props, theming) in an Architecture Decision Record so future teams can replace the React implementation with Vue or Svelte without platform changes.

Governance and Security Checklist

• Sandbox attribute on every iframe (never allow top-navigation or popups).
• CSP Trusted Sites scoped to exact hostnames.
• Permission sets that grant access only to the specific UiBundle or shell component.
• Separate scratch org configs for each micro-frontend team so parallel development does not collide.

Decision Framework for Architects

Requirement	Choose Native UiBundle	Choose External MFE via Shell
Must run on salesforce.app domain	Yes	No
Independent deployment cadence	Medium (metadata deploy)	High (any hosting)
Need to embed in existing LWC page	Via future MFE embedding (pilot)	Immediate via LWC wrapper
Share component outside Salesforce	Easy (standard React bundle)	Trivial (standard web app)
Strictest iframe isolation	N/A	Built-in sandbox

Actionable Next Steps

Audit your current Lightning pages for monolithic LWCs that would benefit from independent release cycles. Prototype one micro-frontend using the external MFE pattern this sprint. Capture the event contract and security settings in an ADR. Once validated, roll the pattern out to the next two high-change surfaces.

SF Platform Architects who adopt this approach ship faster, avoid framework lock-in, and keep Salesforce as the durable core rather than the UI prison.

---

If you’re working out what this means for your own Salesforce org, book a working session and the Funnelists Team will map it against what you already have running.