Build React Apps Natively on Salesforce Using Salesforce Multi-Framework

-

Salesforce development has traditionally centered around platform-native tools like Lightning Web Components, Aura, Visualforce, Apex, and Experience Cloud. These tools are still important, but Salesforce is now opening the door for developers who prefer modern frontend frameworks like React.

With Salesforce Multi-Framework, developers can build React applications that run natively on the Salesforce platform, instead of embedding React apps through iframes, Canvas apps, or external hosting workarounds. Salesforce currently positions Multi-Framework as a beta capability for building React apps on the Agentforce 360 Platform. React is supported today, and Salesforce has indicated that additional frontend frameworks are expected later.

What Is Salesforce Multi-Framework?

Salesforce Multi-Framework is a new way to build user interfaces on Salesforce using popular frontend frameworks like React.

Earlier, if a team wanted to show a React app inside Salesforce, the common options were:

  • Embed the app using an iframe
  • Use a Canvas app
  • Place the app inside Visualforce, Aura, or LWC using an iframe-style approach
  • Host the React app outside Salesforce and connect it back through APIs

These approaches worked, but they often felt disconnected from the Salesforce platform. Authentication, security, deployment, user context, and governance could become more complex.

Multi-Framework changes that by allowing React apps to run directly on Salesforce. Salesforce describes it as a framework-agnostic runtime where React apps can use Salesforce authentication, security, governance, GraphQL, Apex, and UI APIs within the platform model.

Why This Matters

This is important because many enterprise development teams already have React skills. React is widely used for building modern, component-based user interfaces. It allows developers to create reusable UI pieces and combine them into full screens, pages, and applications.

For Salesforce teams, this means developers may not always need to choose between “Salesforce-native” and “React-based” experiences. With Multi-Framework, React can become part of the Salesforce development model.

This does not mean Lightning Web Components are going away. LWC remains core to Salesforce development. Multi-Framework simply gives teams another option when React is a better fit, especially for teams with existing React apps, custom dashboards, portals, or micro-frontends. 

What You Can Build

Using Salesforce Multi-Framework, you can build React apps for different Salesforce use cases, such as:

  • Internal business applications
  • Customer-facing Experience Cloud apps
  • Dashboards and admin tools
  • Case management apps
  • Registration portals
  • Self-service experiences
  • Micro-frontends that need to run inside Salesforce

High-Level Setup Steps

1. Enable Salesforce Multi-Framework

Go to Salesforce Setup and search for React Development with Salesforce Multi-Framework.


2. Check Agentforce Vibes Extension Settings

In Setup, search for Agentforce Vibes Extension.

Make sure the extension is not disabled.



3. Enable Digital Experiences

Please make sure Digital Experiences is enabled in Salesforce.

After that, go to Digital Experiences Settings and enable ExperienceBundle Metadata API.

This step is necessary because the React application requires metadata support to function correctly within the Salesforce runtime environment. We will use this configuration to host the React app that we will build.



4. Activate MCP Servers

In Setup, go to MCP Servers and activate the required services.

  • Salesforce API Context
  • Metadata Experts 


5. Create and Authorize a Salesforce Project in VS Code

Create a Salesforce project in VS Code and authorize your org.

6. Confirm MCP Servers and Skills Are Running

Inside VS Code, open the Agentforce Vibes area and check that the MCP servers are running.




Creating the React App with Agentforce Vibes

Once the setup is ready, open the command palette in VS Code and run the Agentforce Vibes welcome page command.




From there:

  1. Choose React app.
  2. Select whether the app is for internal or external users.
  3. Provide a project name.
  4. Create the project.
  5. Since this is a newly created project, no default org is assigned yet. Click No Default Org Set from the Activity Bar and choose the Salesforce user that was already authorized in VS Code..



For this example, we will begin in Plan Mode. This allows us to review the proposed approach first. Once we are comfortable with the plan, we can switch to Act Mode and proceed with generating the required files and metadata

Example Prompt

Here is a simple prompt you can use as a starting point:

I want you to build a customer-facing React app for a commerce order tracking portal called OrderTracking. The app must be simple: one page where customers can enter their order number and email address to view the current order status. Use only mock data for now. Give it a modern, easy-to-use design. Don't build any other functionality.

Previewing the React App

After the files are generated, you can preview the app inside VS Code.

The transcript mentions using the command:

SFDX: Open in Live Preview

This allows you to test the app locally before deploying it. You can validate the UI, test mock data, and confirm the basic behavior.


Deploying to Salesforce

Once the app looks good, you can ask Agentforce Vibes to deploy the components to your Salesforce org.

For example: Please deploy all components to my Salesforce org.

Agentforce Vibes can run the required Salesforce deployment commands. If errors occur, the tool will suggest fixes or list manual steps needed in the org.

Testing the App in Salesforce

After deployment, the React app can be tested from the related Salesforce Experience Cloud site.


Finally, we were able to create and deploy the React app, along with setting up the external Experience site, and can now see the app running live on the external site.




Benefits of Salesforce Multi-Framework

Salesforce Multi-Framework brings several advantages.

1. React Can Run Natively on Salesforce

Teams can build with React while still staying closer to Salesforce’s platform model.

2. Better Developer Flexibility

React developers can contribute to Salesforce UI development without needing to fully switch to LWC for every use case.

3. Reduced Dependency on Iframes

Older iframe-based approaches can create challenges around authentication, styling, routing, security, and user experience. Multi-Framework provides a cleaner model.

4. Platform Security and Governance

Salesforce highlights that Multi-Framework apps can use Salesforce authentication, security, and governance. This is important for enterprise teams that need control, compliance, and consistency.

5. Faster Prototyping with Agentforce Vibes

Agentforce Vibes can help generate the initial structure using natural language prompts. This does not remove the need for developer review, but it can speed up early development and prototyping.

Things to Keep in Mind

Since Salesforce Multi-Framework is currently beta, teams should be careful before using it in production-heavy scenarios.

A few practical considerations:

  • Test it first in a sandbox or trial org.
  • Review beta terms and limitations.
  • Do not assume all React patterns will work the same way as a normal standalone React app.
  • Validate deployment steps carefully.
  • Keep security, data access, and governance in mind.
  • Use mock data first, then connect to real Salesforce data once the app structure is stable.
  • Continue using LWC where it is the better fit.

Final Thoughts

Salesforce Multi-Framework is an exciting step for Salesforce developers and React developers alike. It gives teams more flexibility to build modern, interactive applications while still working inside the Salesforce platform.

The biggest shift is not just that React can be used with Salesforce. Developers have been doing that for years through iframes, Canvas apps, and external apps. The real shift is that React can now run more natively on the Salesforce platform with Salesforce security, governance, and deployment patterns.

For teams that already have React skills or existing React components, this can open up new possibilities. For Salesforce teams, it adds another tool to the architecture toolbox.

The best approach is to start small. Build a simple React app, preview it, deploy it to a sandbox, and understand how the framework behaves. Once the team is comfortable, you can explore more advanced use cases like real Salesforce data access, Apex integration, GraphQL, and Experience Cloud deployment.

Comments

Post a Comment

Popular posts from this blog

Introduction to Salesforce Agent Script: Build Predictable AI Agents

-
Image
Please visit here for more details - https://ayaninsights.com/guestblogs/introduction-to-agent-script/ In my latest blog, I introduce Salesforce Agent Script and explain how it helps teams build AI agents that are more predictable, controlled, and aligned with business processes. Large language models are flexible, but relying only on natural-language instructions can sometimes produce inconsistent results. Agent Script addresses this challenge by combining the conversational capabilities of an LLM with structured business logic. The blog explains how developers can use conditions, variables, actions, topics, and transitions to control how an Agentforce agent behaves. Agent Script supports familiar logic such as if/else conditions, value comparisons, sequential actions, and checks for missing data. I also cover its core structure, including system settings, configuration, global variables, languages, connections, and topic blocks. The start_agent topic acts as the entry point for each...
Read more

Anti-Patterns in Salesforce Agentforce: What to Avoid When Building AI Agents

-
Image
Salesforce Agentforce is powerful because it allows teams to build AI agents that can understand user intent, retrieve grounded information, execute actions, and support business workflows across Salesforce. But like any powerful platform, the quality of the implementation matters. A good Agentforce implementation does not start with “How many things can the agent do?" It starts with “What problem should the agent solve reliably?” That is where anti-patterns come in. Anti-patterns are common implementation habits that look useful at first but eventually create confusion, poor user experience, inconsistent answers, or hard-to-maintain agents. Below are some of the most common Agentforce anti-patterns and how to avoid them. 1. Trying to Build One Agent That Does Everything One of the biggest mistakes is designing a single agent to handle every business process, every department, and every possible customer question. At first, this feels efficient. One agent, many use cases. Bu...
Read more

MCP vs. Traditional APIs: Choosing the Right Integration Approach

-
Image
Enterprise integration has traditionally been built around APIs. Applications send structured requests, services process them, and predictable responses are returned. This model has supported everything from payment processing and customer portals to mobile applications and large-scale system integrations. The rise of AI agents introduces a different integration challenge. An AI agent does not always follow a fixed sequence designed in advance. It may need to determine which system to use, discover the operations available to it, gather relevant context, and select the appropriate action based on a user’s request. This is where the Model Context Protocol, or MCP, becomes relevant. MCP and traditional APIs are related, but they solve different problems. APIs expose system capabilities. MCP provides a standardized way for AI applications to discover and use those capabilities as tools and contextual resources. Understanding this distinction is important when designing enterprise AI solut...
Read more