micro-frontends

Generate a Micro Frontend LWC shell with iframe communication for Salesforce pages.

803|289|Updated Nov 7, 2025

Search Tags:#salesforce #micro-frontend #sfdx #web-application #lwc #frontend-generation

Ready to run

npx skills add https://github.com/forcedotcom/afv-library --skill micro-frontends

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: micro-frontends
Source: https://github.com/forcedotcom/afv-library/tree/main/samples/webapp-template-app-react-sample-b2x-experimental/.a4drules/skills/feature-micro-frontend-micro-frontend
Command: npx skills add https://github.com/forcedotcom/afv-library --skill micro-frontends

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Micro Frontends enable scalable frontend architectures by providing a reusable wrapper component that can embed separate Web Applications into Salesforce pages, reducing integration complexity and coordination overhead.

Core Features & Use Cases

Scaffold a Micro Frontend LWC wrapper and a shell for iframe communication to isolate and embed a Web Application within Salesforce.
Enable independent deployment and testing of frontend modules while maintaining consistent UI and data exchange across pages.
Use Case: gradually migrate a monolithic Salesforce app by introducing modular micro frontends for features like analytics dashboards or external UI integrations.

Quick Start

Run the micro frontend generator to scaffold a new frontend for your web application.

Frequently Asked Questions about micro-frontends

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I embed an external web application into a Salesforce page using LWC?▼

To embed a web application into a Salesforce page, this generates a Micro Frontend LWC wrapper with a shell for iframe communication. This isolates the external UI while standardizing data exchange and embedding across Salesforce pages.

What is the best way to migrate a monolithic Salesforce app to modular micro frontends?▼

Migrating a monolithic Salesforce app to micro frontends is done by wrapping separate Web Applications in LWC components. This enables independent deployment and testing of frontend modules while maintaining consistent UI across pages.

How do I scaffold a micro frontend for a Salesforce DX project?▼

Scaffolding a micro frontend for a Salesforce DX project uses the generate-micro-frontend CLI from the @salesforce/micro-frontends-experimental package. It locates the target Web Application and generates the wrapped LWC shell.

Do I need to update js-meta.xml targets when adding a micro frontend LWC to Salesforce?▼

Updating the <webAppName>.js-meta.xml targets is required when adding a micro frontend LWC. Configuration for lightning__HomePage and other targets must be updated before deploying via your Salesforce tooling.

Can I use iframe communication to isolate frontend modules in Salesforce?▼

Iframe communication is used to isolate frontend modules in Salesforce by generating a wrapped LWC shell. This reduces integration complexity and coordination overhead while embedding separate Web Applications securely.