ccoenraets / lightning-container-component-samples

LCC Sample App

Installation Instructions

Make sure you have the latest version of the Salesforce DX CLI before proceeding. Update info here.

1. Authenticate with your hub org (if not already done)

   sfdx force:auth:web:login -d -a *your_hub_org*
   

2. Clone the lcc-samples repository:

   git clone https://github.com/ccoenraets/lcc-samples
   cd lcc-samples
   

3. Create a scratch org and provide it with an alias (for example: lcc):

   sfdx force:org:create -s -f config/project-scratch-def.json -a lcc --setdefaultusername
   

4. Push the app to your scratch org:

   sfdx force:source:push
   

5. Assign the lcc permission set to the default user:

   sfdx force:user:permset:assign -n lcc
   

6. Open the scratch org:

   sfdx force:org:open
   

7. In App Launcher, select the LCC Samples app.

Building JavaScript Apps

The Lightning Container Component library is available as a JavaScript module that you can install as a dependency in your JavaScript application using npm. JavaScript modules are not yet supported consistently across all browsers. Therefore, applications using modules require a build process using a tool like webpack or rollup.

The JavaScript applications that use the Lightning Container Component as a module are located in the js-apps folder. Each application has a webpack build configuration (webpack.config.js).

Follow the steps below if you want to make changes to a sample application:

1. Make your changes in source code

2. Install the app dependencies. Make sure you are in the application root folder and type the following command:

   npm install
   

3. Build the app. Make sure you are in the application root folder and type the following command:

   npm run build
   

   Webpack automatically outputs the results (bundle.js) in the staticresources folder corresponding to your application.

4. Type the following command to push your changes to your scratch org:

   sfdx force:source:push
   

NOTE: You can also use the Lightning Container Component library in plain old JavaScript (ECMAScript 5) without using modules and without a build process. Check out Example 4 below to see how.

lightning-container-component-samples's Issues

403 forbidden due to expired access token

When using this sample code it works great (thank you) but every so often while on the salesforce session the CSRF confirmation token expires which causes the iframe to give a 403- forbidden error and breaks since salesforce is expiring the token, caching the expired confirmation token and still passing the expire token to the iframe when the component mounts. This is how the iframe src looks like:

<iframe frameborder="0" allow="geolocation; microphone; camera" sandbox="allow-scripts allow-forms allow-same-origin allow-popups" data-aura-rendered-by="2778:0" src="https://your-dev.container.lightning.com/lcc/34563/lcc_sample_react/index.html?sfdcIFrameOrigin=https%3A%2F%2Fyour-dev.lightning.force.com&_CONFIRMATIONTOKEN=VmpFPSxNakF5TUMwd01pMHlORlF3TVRvME5Ub3hPUzQyTURKYSxhLU56bTBwSmo1ZzZYV00xbW9Wb3dBLE1HTXhNVFUz"></iframe>

but the token is expired and it doesn't update it until the cache refreshes which could take 1 hour + or a user has to empty all the cache, cookies, and local storage or they have to use salesforce in incognito mode. For obvious reasons this is unfeasible.

Is there any way I can access this CONFIRMATION_TOKEN directly so I can just add it to the iframe when the .cmp mounts? or is there a workaround for this? I've seen this a lot in forums but with no solution

Wiki Updates needed

Replace git clone https://github.com/ccoenraets/lcc-samples with git clone https://github.com/ccoenraets/lightning-container-component-samples