Quick Start

The following guide will help you get started on your first Reactforce app

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 here.

Install the Reactforce CLI

The easiest way to get up and running with Reactforce is to use the SFDX plugin:

Command Line

# 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

Good to know: If you would like to bypass the warning message for externally developed SFDX plugins, you can whitelist the plugin.

(Optional) Create a trial dev-hub if necessary

https://developer.salesforce.com/promotions/orgs/dx-signupdeveloper.salesforce.com

Create a Devhub that will last for 30 days if you do not have a production devhub available to you

Authorize your devhub (one time)

Command Line

sfdx org login web -a devhub

Setup Backend (Salesforce Org)

Create a new Salesforce Scratch Org

Command Line

# 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

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 React lightning design system.

Command Line

# 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

Command Line

# 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

Command Line

# Open the org
sfdx org open -o backend

Classic

Open the Salesforce Classic App:

Open the automatically generated frontendAppVF

The React app loads with minor modifications to access the Salesforce backend

Lightning

Modify the react application

This is a good time to setup Hot-Reloading, but it is not covered in this quick start.

Make a change to the React app

React

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

Command Line

# 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!