Today we will check how we can use Lightning Web Components in any External Website using Lightning out. Previously it was not supported but after summer 19 Salesforce allow us to use Lightning Web Components (LWC) in External Websites using Lightning out.
In our last post we study how we can use Lightning Web Components in Visualforce. In this post we will check how we can use Lightning Web Components (LWC) in public website. I will explain step by step so that you can easily use it without any issue.
For this purpose I will use the same LWC component which I have created earlier, you can use any other component too. Just make sure it is using latest version. Now if your public website can do authentication to Salesforce then you can generate the access token. In our sample we will use it for public users so we don’t need the authentication..
Make Component Public:
To make it accessible to public users we need to implement ltng:allowGuestAccess interface. We need to create one community so that our lightning component can be made public. So create a public community and publish it. You don’t need to add any code or make any changes in configuration.
<aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
<aura:dependency resource="lwcVFDemo"/>
</aura:application>WhiteList CORS
Now we need to whitelist our site in Salesforce CORS setting. Search for CORS and add your website base URL there.
Add Code in Public Site
After that we need to add a sample code in your website’s HTML where you want to display the Lightning Web Components.
<div id="lightning"></div>
<script src="https://lwcsummer19nts-developer-edition.gus.force.com/lightning/lightning.out.js"></script>
<script>
$Lightning.use("c:lwcVfDemoApp", function() {
$Lightning.createComponent("c:lwcVFDemo", {
objectName: "Contact"
},
"lightning",
function(cmp) {
console.log("LWC component was created");
// do some stuff
}
);
},
'https://lwcsummer19nts-developer-edition.gus.force.com/'
);
</script>Here https://lwcsummer19nts-developer-edition.gus.force.com/ is the community base URL. In $Lightning.use function we need to pass parameters.
| Name | Type | Description |
|---|---|---|
| appName | string | Required. The name of your Lightning dependency app, including the namespace. For example, “c:expenseAppDependencies”. |
| callback | function | A function to call once the Lightning Component framework and your app have fully loaded. The callback receives no arguments.This callback is usually where you call $Lightning.createComponent() to add your app to the page (see the next section). You might also update your display in other ways, or otherwise respond to your Lightning components app being ready. |
| lightningEndPointURI | string | The URL for the Lightning domain on your Salesforce instance. For example,https://myDomain.lightning.force.com. |
| authToken | string | The session ID or OAuth access token for a valid, active Salesforce session. |
The first parameter is required other three parameters are optional. In normal use you provide all four parameters. As we are hosting it public so we are not providing the authToken.
After this you can preview your website and you will find your Lightning Web Component running on your website smoothly. I have follow same steps in this post and you can see the LWC from my org running on my blog.
So it is very easy and you need to follow some simple steps to use Lightning Web Components using Lightning out. Now you can create some form and store the data inside Salesforce using it and can achieve many more use cases.
Did you like the post or wants to add anything let me know in comments. Happy Programming 🙂
Hi Tushar,
I have added my website url in CORS but still I am getting access error in browser console
Are your website using https? What error you are getting?
Getting “Lightning out App error while loading the App” error
Make sure you are following all steps. Are you able to run that app inside Salesforce?
Thanks for this nice article Tushar. It helped me alot.
I would like to point out that the endpoint to used in the snippet to access lightningout.js should be community endpoint base url e.g. https://universalcontainers.force.com/ourstores/. What has been used in the example is the domain of the community.
https://lwcsummer19nts-developer-edition.gus.force.com/
Also, I think the dependency definition should include namespace declaration:
Domain is optional and in my community I didn’t added that. 🙂
Issue with Lighting out: Hosting a flow on external site useing Lighting out app. Application does not properly display the picklist from the flow (only an empty pick lit box). If anyone knows why this is happening please help. the picklist live on Contact Request object and is set to public read write.
Sorry I never faced this issue.
Hi daniel, i have a similar requirement to host a flow on external site. can you tell me if we can give them a well formed URL with params so that they can iframe it rather than including all this code in their HTML ?$Lightning.use(“c:lwcVfDemoApp”, function() {
$Lightning.createComponent(“c:lwcVFDemo”, {
Did you find a solution to this?
Added CORS still getting CORS error.
Access to XMLHttpRequest at ‘https://demoorginterview-dev-ed.lightning.force.com/c/OpportunitiesListViewApp.app?aura.format=JSON&aura.formatAdapter=LIGHTNING_OUT’ from origin ‘https://obscure-tor-38324.herokuapp.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
both the sites have https.
I am facing the same , please let me know if you found solution
Make sure you have followed all steps. Sometimes it takes 2-3 minutes to reflect.
This is still an issue for me as well. I am using a node js application with CORS. Sometimes I remove / or add /s/ to the endpoint. When I do this I get:
Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse ()
at lightning.out.delegate.js?v=Q8onN6EmJyGRC51_NSPc2A:144
at XMLHttpRequest.xhr.onreadystatechange (lightning.out.delegate.js?v=Q8onN6EmJyGRC51_NSPc2A:113)
Which to me suggest the library is getting loaded.
Looks like issue is related to endpoint.
can we use this is external application built in angular8
I believe yes we can.
Getting “Lightning out App error while loading the App” error, while inside Salesforce