React Development Using Multi-Framework

React is an open-source framework for building modular and component-based web user interfaces, and provides a vast JavaScript library of components. When you build a React app for the Headless 360 platform, your app becomes a piece of Salesforce metadata called a UIBundle. A UIBundle is a self-contained unit that holds your app’s source, configuration, and routing rules.

Because the UIBundle is metadata, it behaves like other Salesforce metadata. The app is:

  • Stored and versioned: Your app’s files are stored in Salesforce, and each UIBundle has a version. You manage the publication lifecycle on the platform rather than on an external web server.
  • Managed with Salesforce DX: A React app is part of a Salesforce DX project. You use familiar Salesforce DX workflows, CLI commands, and project structures to manage the app alongside your other metadata, such as custom objects and Apex classes.
  • Deployed as metadata: You deploy a UIBundle to an org the same way you deploy any other source, and you can include it in your deployment pipeline.

Your app’s files live in the Salesforce DX project under the force-app/main/default/uiBundles/ directory. See React App Project Structure.

With Salesforce Multi-Framework, you can build two kinds of React apps, based on the app’s audience.

  • Internal apps are for employees who sign in with their Salesforce credentials. After you deploy an internal app, users open it from the Salesforce App Launcher on desktop or in the Salesforce mobile app. Permission sets or user profiles control app access, just like Lightning apps.
  • External apps are for people outside of your Salesforce org, such as customers and partners. External apps are surfaced through an Experience Cloud site, so visitors don’t need to be logged into Salesforce.

An internal app and an external app use different project templates and platform configuration, and require some additional metadata types to integrate with the Headless 360 platform.

FeatureInternal AppsExternal Apps
AudienceEmployees with Salesforce loginsCustomers, partners, or public users
AuthenticationSalesforce credentials (SSO supported)Experience Cloud guest access or authenticated login
Access pointApp Launcher on desktop and the Salesforce mobile appDigital Experiences app and Experience Cloud site URL
Templatereactinternalappreactexternalapp
Metadata TypesUIBundle + CustomApplicationUIBundle + Experience Cloud site metadata (DigitalExperience, DigitalExperienceConfig, Network, CustomSite)
Pre-built featuresAgentforce Conversation Client, object searchNavigation, authentication, object search

Salesforce Multi-Framework provides flexible options for developing React apps or reusing your existing React assets on the Headless 360 platform.

With Agentforce Vibes, you can accelerate the entire React development lifecycle. Because Agentforce Vibes is directly connected to your Salesforce org, it understands your org’s metadata, objects, Apex dependencies, and more. You describe what you want to build using natural language prompts and Agentforce Vibes handles scaffolding, metadata, and business logic. Use a template or sample app to get started, and add Salesforce data, Salesforce CMS content, and features such as search, authentication, and the Agentforce Conversation Client.

Alternatively, if you prefer to code by hand or you want to reuse existing React apps, you can manually integrate your apps with the Headless 360 platform. Familiar Salesforce DX workflows, CLI commands, and project structures make it easy to manage React apps alongside your other Salesforce metadata.

To get started with:

This guide describes how to configure your org for React development, the structure of a Multi-Framework app, and how to integrate the app with the Headless 360 platform and access data. For in-depth information about developing React apps from scratch, see the React Documentation: Quick Start.