How to Quickly Scaffold and Deploy a React App on Salesforce

Salesforce offers CLI templates that enable rapid scaffolding of React applications, complete with a ready-to-run React/Vite setup. Two methods are available: generate a full SFDX project with an internal React app, or incorporate a React UI bundle into an existing SFDX project. Both approaches provide React boilerplate for running, exploring, customizing, and deploying. The primary distinction lies in the amount of Salesforce setup required and the initial stage of the app's availability in the org.

To initiate a new project, prerequisites include setting up VS Code, Salesforce CLI, Salesforce Extension Pack, a Salesforce org (like a Trailhead Playground), and Node.js. Verify the CLI and connected orgs, then set the default org using the command `sf config set target-org = my-org`. To create a new project using the `reactinternalapp` template, execute `sf template generate project --name my-react-app --template reactinternalapp`.

This generates a new Salesforce DX project with the React application and the necessary Salesforce metadata for an internal React app. Install dependencies and start the React app locally with `npm install`, followed by `npm run dev`. The prebuilt React application can then be explored and modified. Deploying the project involves running `sf project deploy start --source-dir force-app` from the project root.

If required by the generated project, assign the generated permission set to your user, and the app will appear in the App Launcher.

Alternatively, to add a React application to an existing SFDX project, prerequisites include the same setup for a new project. The `reactbasic` template can be used to create a React UI bundle inside the project with the command `sf template generate ui-bundle --name ReactDemo --template reactbasic`. The bundle is located in `force-app/main/default/uiBundles/ReactDemo/`, containing the React application.

Install dependencies and run locally using `npm install`, followed by `npm run dev`. Deploying the UI bundle requires returning to the SFDX project root and executing `sf project deploy start --source-dir force-app/main/default/uiBundles/ReactDemo`. The difference with the UI Bundle approach is that, while it provides the React application itself, additional Salesforce metadata is needed to expose it as an internal application.

This includes a CustomApplication under `force-app/main/default/applications/`, a reference from the application to the UI Bundle, a permission set to make the application visible, and assignment of that permission set to your user. After deployment, the React application becomes accessible through the Salesforce App Launcher. The choice between the two approaches depends on whether you are starting a new Salesforce project or adding React to an existing one.