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

19 thoughts on “Use Lightning Web Components in External Website – Lightning Out

  1. Hi Tushar,

    I have added my website url in CORS but still I am getting access error in browser console

  2. 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:

          1. Hello Tushar,

            I am still, blocked, I am wondering now more questions, and I am outside this blog alone to answer in spite of but numerous cordial requests. 🙁

            I wonder if it comes from my code or the key Oaut that I need to know or parameters of Connected App, do you want to challenge me on this one please?

            Aloha !

              1. Aloha Tushar,

                I implemented “ltng: allowGuestAccess” but I still have an error code 500 since I created and published my community.

                You can see the result here: https://nashle.github.io/lightningout/
                My repository is here: https://github.com/Nashle/lightningout/

                I test several configurations but none works.

                Of all that I did with the Aura Components, the use of Lighnting Out is the most mysterious, I beg you, help me please.

  3. 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.

Leave a Reply

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