(WIP) Hot Reloading during Development

Reactforce allows you as React developer the same local development server and hot-reloading environment that you are used to. Here is how it works:

1. Local developer workstation runs the local react server

2. Local developer workstation runs ngrok proxy server

3. Local react server is available to public internet via the ngrok tunnel

4. Salesforce visualforce page container is used to render the react app by passing ngrok url through the page url parameters.

Architecture Overview

Specific Setup Instructions:

• The react app .env file should be updated with the following values

  • WDS_SOCKET_HOST=localhost

  • WDS_SOCKET_PORT=3000

  • REACT_APP_PUBLIC_URL=http://localhost:3000/

• Make sure to reset these values before deploying the bundle to Salesforce static resources.

Make sure to reset these values before deploying the bundle to Salesforce static resources. Your react script will most likely not work without resetting these environment variables before deployment.

• This configuration is captured within the .env.development file that is created during the reactforce create command. You can swap the contents of .env.development with .env or manually update the entries in the .env file.

Local Development Mode for Hot Reloading
# when running locally the following vars should be set to support the active refresh
WDS_SOCKET_HOST=localhost
WDS_SOCKET_PORT=3000
REACT_APP_PUBLIC_URL=http://localhost:3000/

# Package for Salesforce Mode
# when building the production bundle the following line should be uncommented
# REACT_APP_PUBLIC_URL=

• Open the page from Salesforce Classic using the apex/{{visualforce_container}} page (e.g. {{salesforce_domain}}/apex/frontendVf

• Pass the ngrok domain as a url parameter into the visualforce page. bundleDomain has been defined in the visualforce controller to allow dynamic rendering of the local react server.

  • example: {{salesforce_domain}}/apex/frontendVf?bundleDomain=https://3553c59dd0a8.ngrok.app

Note: Lightning Components are unable to dynamically load a different script at runtime and therefore Hot-Reloading is only available in Visualforce (Salesforce Classic) at this time.

• Once the bundleDomain has been passed into the Visualforce page, restart the local react server with the correctly configured environment variables. Hot reloading should now be enabled on your Reactforce app! Have fun!