DEV Community

Cover image for How to Quickly Scaffold and Deploy a React App on Salesforce
Exploring Agentforce
Exploring Agentforce

Posted on

How to Quickly Scaffold and Deploy a React App on Salesforce

#salesforce #react #sfdx #tutorial

Salesforce provides CLI templates that can quickly scaffold a React application with a ready-to-run React/Vite setup.

There are two approaches:

  1. Generate a complete SFDX project with an internal React app.
  2. 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
Enter fullscreen mode Exit fullscreen mode

Check your connected orgs:

sf org list
Enter fullscreen mode Exit fullscreen mode

Set your default org:

sf config set target-org=my-org
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

The bundle is created under:

force-app/
└── main/
    └── default/
        └── uiBundles/
            └── ReactDemo/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 CustomApplication under force-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.

Top comments (0)