This guide was last refreshed and tested on April 14th, 2023 against Salesforce v57.0 and React 18.
Setup Your Development Environment (one time)
Reactforce is intended to be installed into your Salesforce project folder.
Install the Salesforce CLI if necessary
Install the SFDX CLI by following the instructions .
Install the Reactforce CLI
The easiest way to get up and running with Reactforce is to use the SFDX plugin:
# Install via NPM
sfdx plugins install @cloudpremise/reactforce@latest
# Accept the plugin
This plugin is not digitally signed and its authenticity cannot be verified. Continue installation (y/N)
y
...
...
...
Installing plugin @cloudpremise/reactforce... installed v0.0.9
(Optional) Create a trial dev-hub if necessary
Authorize your devhub (one time)
sfdx org login web -a devhub
Setup Backend (Salesforce Org)
Create a new Salesforce Scratch Org
# Create a new project folder
# Note the sfdx CLI is required
sfdx project generate -n backend
cd backend
# Generate the scratch org as a child of the devhub
sfdx force:org:create -f ./config/project-scratch-def.json -a backend
Install Reactforce reusable assets
# From the SFDX project folder (i.e. /backend)
sfdx reactforce init
# Push the generated static resource into your salesforce org (scratch org)
sfdx force source push -f -u backend
Create a new Reactforce App
Generate a new Reactforce app using the default settings
# From your SFDX project folder (i.e. /backend)
sfdx reactforce create -a frontend
# Push the generated static resource into your salesforce org (scratch org)
sfdx force source push -f -u backend
# Assign the permission set to the user to authorize the react app components
sfdx force user permset assign -n frontend -u backend
View the generated app
# Open the org
sfdx org open -o backend
Open the Salesforce Classic App:
Open the Lightning App:
Modify the react application
Make a change to the React app
Find the following file:
/backend/reactforce/frontend/src/App.js
Make a minor change to the code and save the file. Here is an example modification.
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<p>
Reactforce is awesome!
</p>
</header>
</div>
);
}
export default App;
Save the changes.
Package and publish the react code to Salesforce
# Build the react application.
# Copy the react bundle into force-app/main/default/staticresources
# Run this command from the reactforce application folder (i.e. /backend/reactforce/frontend)
cd ./reactforce/frontend
npm run publishToStaticResources
# Push the Static Resource into Salesforce
# Run this command from the project folder
cd ../..
sfdx force source push -f -u backend
Go Impress all your friends
The reactforce command line tool will help you to impress all of your friends assuming your friends like building awesome react applications hosted natively from within Salesforce. Happy Coding!
Good to know: If you would like to bypass the warning message for externally developed SFDX plugins, you can whitelist the .
Each project and org should be individually configured with shared assets delivered via a static resource. The shared assets are helpful for building Reactforce apps that use the .
This is a good time to setup , but it is not covered in this quick start.
