(WIP) Using ReactJS for Experience Cloud (Communities)

Setup a Visualforce Community (Experience Cloud) for React

This guide was last refreshed and tested on May 27th, 2023 against Salesforce v57.0 and React 18.

Prerequisities

This guide assumes you have successfully completed the Quick Start guide.

Setup the 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 backendcomm
cd backendcomm

# Initialize the new project to work with ReactForce
sfdx reactforce init

# Generate the scratch org as a child of the devhub
# Note this scratch org configuration is provided by the reactforce cli
# Any scratch org configuration that supports communities should work
sfdx force:org:create -f ./reactforce/orgs/project-scratch-developer-communities.json -a backendcomm

# Push the generated static resource into your salesforce org (scratch org)
sfdx force source push -f -u backendcomm

Create a new Reactforce App for Communities

Generate a new Reactforce app using the template for visualforce communities

Command Line

# From your SFDX project folder (i.e. /backendcomm)
# Note you must be authorized to this repository
sfdx reactforce create -a frontendcomm -r cloudpremise/reactforce-premium-templates -t vf_community

# Push the generated code into your salesforce org (scratch org)
sfdx force source push -f -u backendcomm

# Assign the permission set to the user to authorize the react app components
sfdx force user permset assign -n frontendcomm -u backendcomm

Setup the Community

(See if this can be automated somehow)

1. Salesforce Tabs + Visualforce Template (frontendcomm)

2. Administration --> Settings --> Activate --> OK

3. Administration --> Settings --> Copy the url for later use

4. Administration --> Login & Registration --> Allow employees to log in directly to an Experience Cloud site = TRUE

5. Administration --> Login & Registration --> Logout Page Url --> Full URL = paste value copied from above

6. Administration --> Pages --> Home Page = Visualforce Page --> frontendcomm

7. Administration --> Pages --> Go to Force.com --> Edit --> Url Rewriter Class = frontendcommUrlRewriter

8. Administration --> Pages --> Go to Force.com --> Url Redirects --> Source URL = /frontendcomm/apex/frontendcommVf and Target URL = /frontendcomm

9. Open the site incognito or from a different browser

View the generated app (unauthenticated)

Welcome to your new landing page!!

Login (as system administrator)

1. Obtain your system adminstrator username and password for the scratch org

2. Navigate to the login link

Login with your system adminstrator username and password

Authenticated landing page!!

Notice the message "Learn about Reactforce here." comes from the Visualforce controller (e.g. frontendcommCtrl)

React routing supported with deep links!! Try it!! Refresh the screen...

Logout

1. Click the avatar in the top right and logout.

2. Notice you are returned to your original landing page

Go Save the World

Now that you can build and deploy a fully functional single page application written in React and running on Salesforce you can accomplish anything... INCLUDING saving tons of money for your company. Make sure you do something good for others with all of those savings!!