To use LWC in the public site; we need to embed the LWC in the Virtualforce page first.

  • Check the Lightning Out Dependency App.
  • Use the code below with access = “GLOBAL” and ltng:allowGuestAccess. The aura:dependency is the LWC component; c:booking2 is the little app we want to expose to the public via the public site.
<!--lwcvfp.app-->
<aura:application access="GLOBAL" extends="ltng:outApp"  implements="ltng:allowGuestAccess"> 
    <aura:dependency resource="c:booking2"/>
</aura:application>
  • Create Visualforce page to include the lighting app. Why Visualforce page? Because, currently, this is the only way to expose to use public site.
  • First we have to include <apex:includeLightning/> to your page
  • Second, we will add a <div> with id, “container” for example, to be the container.
A<!-- //HTML Visualforce template -->
<apex:page ShowHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" 
    applyBodyTag="false" docType="html-5.0" cache="false" lightningStyleSheets="false" >

<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="x-ua-compatible" content="ie=edge" />
        <title>WBC Booking</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!-- Import the Design System style sheet -->
        <apex:slds />


        <apex:includeLightning />

        <style>
        </style>
    </head>
    <body>
        <div id='container' style=";margin-bottom:24px;"> </div>
        <script type="text/javascript">
            $Lightning.use("c:lwcvfp", function() {
                $Lightning.createComponent("c:booking2",
                    {},
                    "container",
                    function(cmp) {
                        console.log("LWC is awesome");
                        // do some stuff
                    }
                );
            });
        </script>
    </body>
</html>
</apex:page>
  • Add the page to public site; You can access the demo menu to view my little booking app embed in a iframe to see the result.