Salesforce Docs Portal

Embed External Web Apps in Salesforce with Micro-Frontends (Developer Preview)

Embed existing React, Angular, Vue, or JavaScript web apps in Salesforce pages without rewriting them. Micro-Frontend (MFE) runs your web app in a secure, sandboxed iframe with built-in communication, and lets you deploy updates independently of Salesforce releases.

Where: This change applies to Lightning Experience, Experience Builder sites, and Experience Cloud LWR sites in all editions.

Note
Note The Dev Channel provides access to features that are not generally available and have been designated as pilot, beta, limited release, or developer preview. Their use is at the Customer's sole discretion and is subject to the Beta Services Terms at Agreements - Salesforce.com.

Why: Teams that build with modern web frameworks no longer need to rewrite in LWC to ship inside Salesforce. Deploy framework-native code into Salesforce pages while the platform handles security isolation, cross-frame communication, and lifecycle management. Deploy and update your embedded components on your own schedule without waiting for Salesforce releases.

How: To set up Micro-Frontends:

  1. Deploy the @sf-embedding/experimental-mfe-lwc-shell package as an LWC entity in your org. To deploy:
    1. Install the package in your SFDX project: npm install --save-dev @sf-embedding/experimental-mfe-lwc-shell version 2.2.1-rc.5 or above.
    2. Generate the vendor component by running: npx lwc-shell-vendor-build (this creates a deployable LWC at force-app/main/default/lwc/vendorLwcShell/).
    3. Deploy the vendor component to your org: sf project deploy start --source-dir force-app/main/default/lwc/vendorLwcShell.
  2. In Setup, add your widget's domain to CSP Trusted Sites so that Salesforce can load resources from your app's domain inside the iframe.
  3. Create a wrapper LWC with a lwc:dom="manual" container element.
  4. In the wrapper's JavaScript, create the <lwc-shell> element imperatively. Set sandbox, title, and src attributes before appending the element to the container. 
    const shell = document.createElement('lwc-shell');
shell.sandbox = 'allow-forms allow-modals';
shell.title = 'Product Registration';
shell.src = 'https://widget.example.com/register';
container.appendChild(shell);
  5. In your external widget app, install the @salesforce/experimental-mfe-bridge version 2.2.1-rc.2 npm package (the MFE Bridge). The bridge handles data exchange, theming, and events across the iframe boundary.

The iframe runs in a restricted sandbox with a three-tier security model:

  • Base tokens (always applied): allow-scripts, allow-pointer-lock, allow-same-origin
  • Optional tokens (opt-in via sandbox attribute): allow-forms, allow-modals, allow-downloads
  • Blocked tokens (never allowed): allow-top-navigation, allow-popups
Note
Note As lwc-shell is a third-party component, having allow-same-origin as a sandbox token only works on Experience sites when Locker/LWS is disabled. This will be addressed in the GA version as lwc-shell will be provided as a first-party component.