How to Create a Public Site in Salesforce with LWC?

Salesforce Lightning Web Components (LWC) is a modern way of building fast and scalable web components that can run on any platform. LWC can also be used to create public sites that can be accessed by anyone on the internet without requiring authentication. In this blog, we will demonstrate how to create a public site using Visualforce Pages in Salesforce. But before we start, let’s understand what a public site in Salesforce is.

What is a Public Site in Salesforce?

A public site in Salesforce is a website that can be accessed by anyone on the internet without requiring authentication. A public site can be used to display information, collect data, or provide services to external users. A public site can be hosted on a custom domain or a subdomain of force.com.

Steps to creating a public site in Salesforce with LWC

Step 1: Create a VF page

A VF page is a Visualforce page that can be used to display LWC components on a public site. To create a VF page, go to Setup > Develop > Pages and click New. Enter a name for the VF page, such as MyLwcSite, and click OK. In the code editor, enter the following code:

This code loads the LWC component using lightning out, which is a feature that enables you to use LWC components outside of the Lightning Experience. The lightning out script loads the Lightning runtime and renders the component in the div element with the id of lwcContainer. You need to specify the namespace and component name of the LWC component you want to display, such as c:myLwcComponent.

Step 2: Create a Lightning Application

A Lightning application is a container for your LWC component that defines its dependencies and access level. To create a Lightning application, go to Setup > Develop > Lightning Components and click New. Enter a name for the Lightning application, such as myLwcComponentApp, and click Submit. In the code editor, enter the following code:

This code creates a Lightning application that extends ltng:outApp, which is a base application that enables you to use lightning out. The aura:dependency tag defines the dependencies for your LWC component, such as c:myLwcComponent. You also need to set the access attribute to GLOBAL, which means that your Lightning application can be accessed by any Visualforce page.

Step 3: Create an LWC Component

An LWC component is a custom web component that contains HTML, CSS, and JavaScript code.

To create an LWC component, go to Setup > Develop > Lightning Components and click New. Enter a name for the LWC component, such as myLwcComponent, and click Submit. In the code editor, enter the following code:

This code creates an LWC component that displays some content using standard HTML tags and custom Lightning Web Components tags, such as lightning-button.

The JavaScript file defines a handler function for the button click event that displays an alert message. The template also displays a message after following steps 1 and 2.

Step 4: Create a Public Site

A public site is a website that can be accessed by anyone on the internet without requiring authentication.

To create a public site, go to Setup > Develop > Sites and click New. Enter a name and a label for the public site, such as MyLwcSite, and click Save. In the Site Details page, click Edit under Site Visualforce Pages.

In the Available Visualforce Pages section, select the VF page you created in Step 1, such as MyLwcSite, and click Add. Click Save. On the Site Details page, click Activate to activate your public site.

Step 5: Test Your Public Site

To test your public site, go to Setup > Develop > Sites and click the name of your public site, such as MyLwcSite. In the Site Details page, click Preview As Admin to open your public site in a new tab.

You should see your LWC component displayed on your public site. You can also copy the URL of your public site and paste it into another browser or device to test it without logging in to Salesforce.

Output: LWC public site link

Conclusion:

There you have it! By creating a public site in Salesforce with LWC, you can leverage the power and performance of LWC to build engaging and interactive web pages that can be accessed by anyone on the internet. Be sure to try out the solution and stay tuned for more interesting Salesforce development services!