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!

Related Articles

In this detailed guide, we will walk you through the significant yet easy steps to configure Email to Salesforce. Without any further ado, let’s get started! About Email to Salesforce As the term refers, Email to Salesforce is valuable for any organization that businesses use as their Customer Relationship Management (CRM) platform. It helps streamline […]

Read More
Guide on CRUD Operations in Node.js with jsForce

CRM developers typically need to integrate Salesforce with Node.js apps. One well-known library for this purpose is jsForce, which provides a comprehensive set of tools for interacting with Salesforce data and performing CRUD tasks effectively. Let’s dive into the blog, where you will understand the use of jsForce to execute key CRUD tasks within Salesforce, […]

Read More
How to Implement Round Robin Assignments in Salesforce Using Apex

Ensuring a proper workload balance and quick follow-ups from internal or external team members, leads, opportunities, or task distributions is crucial. To achieve this, all you need is a Round Robin assignment. In this step-by-step guide, we will walk you through the process of implementing a round-robin assignment in Salesforce using Apex. Here, we’ve used […]

Read More
Best Salesforce Developments Services Provider

In this step-by-step guide, we will walk you through the significant role of Large Data Volumes in Salesforce, and what strategies or practices you should keep in mind. What is Large Data Volumes? In Salesforce, Large Data Volumes (LDV) refers to managing a huge amount of records available in the platform. LDV usually comes into […]

Read More

Salesforce Apex includes numerous built-in text handling classes, and in addition to them, the Pattern and Matcher classes are good for performing complex string operations. These classes enable us to define and work with regular expressions, which are of particular importance for data validation, searching, and modification. In this technical blog, we will find out […]

Read More

Maintaining security and compliance in Salesforce requires effective user access management. This article will lead you through the process of creating expiration dates for Permission Sets and Permission Set Groups, allowing you to automate access removal while minimizing manual work. Know how this functionality simplifies workflows, guarantees compliance, and improves security procedures. Why Use Expiration […]

Read More
Our Location worldwide
Indian Flag India
3rd Floor, A-10, Pegasus Tower, Sector 68, Noida, Uttar Pradesh 201301 +91-1203117884
United States of America Flag USA
333 West Brown Deer Road Unit G – 366 Milwaukee WI, USA 53217 +1(262) 310-7818
United Kingdom Flag UK
7 Bell Yard, London, WC2A 2JR +44 20 3239 9428
Canada Canada
HIC Global Solutions INC
43 Lafferty Lane, Richmond Hill, L4C 3N8, CA +1(262) 310-7818