How to set LWC on website homepage in salesforce?

Question

I am trying to create a public force.com site; in which people can visit the site without logging in, so I have registered my site and then trying to set home page. Here "active site homepage" only accepts VF page.

I want my LWC to be on the homepage of my force.com site.

I have seen articles saying "active site homepage" only accepts visual force pages so first make VF app page then VF aura component page and then inside aura component use + create LWC; so Is there an easy way to directly set LWC as "active site homepage" instead of involving VF/aura ??

Answer 1

You can't expose Lightning Web Components in force.com sites. There is an idea here and worth voting for it : https://ideas.salesforce.com/s/idea/a0B8W00000GdgnkUAB/sites-with-lightning-web-components

However you can embed LWC components inside a VF page with the help of Aura App. And make the VF page available via force.com site.

Find details here : Use Lightning Components in Visualforce Pages

Relevant Code Snippet below

LWC Component

helloWorld

Aura App (guestLightningApp)

Important: Add the ltng:allowGuestAccess interface to your Lightning Out dependency app to make it available to users without requiring them to authenticate with Salesforce.

<aura:application extends="ltng:outApp" implements="ltng:allowGuestAccess">
    <c:helloWorld></c:helloWorld>
</aura:application>

VF Page

<apex:page sidebar="false" showHeader="false">
    <apex:includeLightning />
    <div id="lightning" />
    <script>
        $Lightning.use("c:guestLightningApp", function() {
          $Lightning.createComponent(
              "c:helloWorld",
              {},
              "lightning",
              function(cmp) {
                console.log("Component is created!");
              }
          );
        });
    </script>
</apex:page>