(WIP) "All"

Setup the "All" Premium Template

This guide was last refreshed and tested on June 16th, 2023 against Salesforce v58.0 and React 18.

The sf executable is used where possible. The related sfdx commands should still work.

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

# Update the plugins
sf plugins install @cloudpremise/reactforce@latest

# Create a new project folder
# Note the sfdx CLI is required
sf project generate -n backendall
cd backendall

# Initialize the new project to work with ReactForce
sf 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
sf org create scratch -f ./reactforce/orgs/project-scratch-developer-communities.json -a backendall

# Push the generated static resource into your salesforce org (scratch org)
sf project deploy start -c -o backendall

Create a new Reactforce App (w/ 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
sf reactforce create -a frontendall -r cloudpremise/reactforce-premium-templates -t all

# Note you must currently manually create a vf community site named frontendall

# Push the generated code into your salesforce org (scratch org)
sf project deploy start -c -o backendall

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

WIP Setup the Community

(See if this can be automated somehow)

1. Add a role to your user.

2. Add an account for the community registrations.

3. Salesforce Tabs + Visualforce Template (frontendall)

4. Administration --> Settings --> Activate --> OK

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

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

7. Administraion --> Login & Registration --> (Leave this set to Default even though this is a react login solution)

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

9. Administration --> Login & Registration --> Registration Page Configuration --> (Leave this set to Default even though this is a react login solution)

10. Administration --> Pages --> Home Page = Visualforce Page --> frontendall

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

12. Administration --> Pages --> Go to Force.com --> Url Redirects --> Source URL = /frontendall/apex/frontendallVf and Target URL = /frontendall

13. 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!!