Use Lightning Web Components in External Website – Lightning Out

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.

Lightning Web Components Using Lightning Out, Enable website in CORS

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.

NameTypeDescription
appNamestringRequired. The name of your Lightning dependency app, including the namespace. For example, “c:expenseAppDependencies”.
callbackfunctionA 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.
lightningEndPointURIstringThe URL for the Lightning domain on your Salesforce instance. For example,https://myDomain.lightning.force.com.
authTokenstringThe 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 🙂

Advertisements

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.