skills.rest
forcedotcom
forcedotcomOFFICIAL
Explore all skills by this author →
Website𝕏@salesforcedevsGitHub

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
One-click install
npx skills add https://github.com/forcedotcom/afv-library --skill micro-frontends
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
gerald-icagerald-ica

salesforce-development

Provide Salesforce development patterns for LWC, Apex, REST/Bulk APIs, and DX.

Community
Advanced
JaganproJaganpro
423

sf-lwc

Scaffold Lightning Web Components with PICKLES architecture and Jest tests.

Community
Advanced
JeffallanJeffallan
10.9k

salesforce-developer

Develop scalable Salesforce applications with Apex, LWC, SOQL, and Salesforce DX.

Community
Advanced
Alif-NAlif-N

add-microfrontend

Create micro-frontend components with iframe composition and shared Supabase authentication.

Community
Intermediate