Using Create-React-App with Salesforce Lightning Container

Here is a simple tutorial on how to bring your Create-React-App project inside of Salesforce using lighting:container

React inside of Salesforce

Resources

• Create-React-App
• Lightning:Container

Getting started

Create a react app project

npx create-react-app myreactapp 
cd myreactapp 

Then open the package.json and add the code below above the name parameter. This will make all static files relative to index.html

"homepage": ".",

Adding homepage parameter to the package.json

Build your static files by running the build command

npm run build

Go to your build folder and zip all the files inside the folder. Do not zip the build folder itself, see below

Files we want to zip from the build folder

Next go to your salesforce org and upload the zip file as a static resource. Make sure that Cache Control is set to Public, see below.

Uploading zip file as static resource

Finally, create a lighting aura component and using lightning:container we can pull our react app project

<lightning:container src="{!$Resource.myreactapp + '/index.html'}"/>

Troubleshooting

• My react app is not filling up the whole page/screen

Wrap your lightning container with a div, see below

<div style="position:absolute; width:100%; height: 100%"><lightning:container src="{!$Resource.myreactapp + '/index.html'}"/>
</div>

• Unable to see my react app inside of salesforce.

Double check that you zip all the contents in the build and not the build folder itself

Limitations

• Please checkout this link to learn the limits with lightning:container
• Click here if you see CSP Violations with your lightning:container