Salesforce provides CLI templates that can quickly scaffold a React application with a ready-to-run React/Vite setup.
There are two approaches:
- Generate a complete SFDX project with an internal React app.
- Generate a React UI Bundle inside an existing SFDX project.
Both give you React boilerplate that you can run, explore, customize, and deploy. The main difference is how much Salesforce setup is included and what you need to do before the app is available in the org.
Prerequisites
You'll need:
- VS Code
- Salesforce CLI (
sf) - Salesforce Extension Pack
- A Salesforce org, such as a Trailhead Playground
- Node.js
Check the CLI:
sf --version
Check your connected orgs:
sf org list
Set your default org:
sf config set target-org=my-org
Option 1: Generate a complete SFDX project
If you're starting from scratch, you can generate a complete project using the reactinternalapp template:
sf template generate project --name my-react-app --template reactinternalapp
This creates a new Salesforce DX project with the React application and the Salesforce metadata needed for an internal React app.
Install the dependencies and start the React app locally:
cd my-react-app
npm install
npm run dev
You now have a prebuilt React application that you can explore and modify.
Deploying the project
From the project root:
sf project deploy start --source-dir force-app
After deployment, assign the generated permission set to your user if required by the generated project - app appears in the App Launcher.
The advantage of this approach is that Salesforce gives you a more complete starting point. You're starting with an application rather than just a UI Bundle.
Option 2: Generate a React UI Bundle
This approach is useful when you already have an SFDX project and want to add a React application to it.
From the root of your existing project:
sf template generate ui-bundle --name ReactDemo --template reactbasic
The bundle is created under:
force-app/
└── main/
└── default/
└── uiBundles/
└── ReactDemo/
Inside you'll find the React application.
Install the dependencies and run locally:
cd force-app/main/default/uiBundles/ReactDemo
npm install
npm run dev
This gives you the same basic experience you'd expect from a modern React/Vite application: start with working boilerplate and then build on top of it.
Deploying the UI Bundle
Go back to the SFDX project root and deploy the bundle:
sf project deploy start --source-dir force-app/main/default/uiBundles/ReactDemo
However, this is where the two approaches differ. The reactbasic UI Bundle gives you the React application itself, but you need additional Salesforce metadata to expose it as an internal application:
- A
CustomApplicationunderforce-app/main/default/applications/ - A reference from the application to the UI Bundle
- A permission set that makes the application visible
- Assignment of that permission set to your user
Once that setup is deployed and the permission set is assigned, the React application becomes available through the Salesforce App Launcher.
Which approach should you use?
If you're starting a new Salesforce project, the complete project template is the easier starting point. If you already have a Salesforce DX project and want to add React to it, use the UI Bundle.
Both approaches solve the same basic problem: get a working React application scaffolded quickly so you can start exploring and developing. **The difference is **where you start and how much Salesforce setup you have to do yourself.
