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
How to Use TypeScript in Salesforce Lightning Web Components (LWC)

TypeScript is a programming language developed by Microsoft; used for enhancing JavaScript by adding different static types. With the help of TypeScript, developers can easily find errors during the development process before the execution. It also makes the code more readable and maintainable. With the successful integration of Salesforce Lightning Web Components (LWC), TypeScript improves […]

Read More
Expert Guide on Seamless Integration of Salesforce and QuickBooks Online

Integrating Salesforce with QuickBooks Online can significantly streamline your business operations, improving data accuracy and efficiency. QB Sync Made Easy offers a seamless solution to synchronize customer and financial data between the two platforms. This expert QuickBooks Online, on the other hand, is a leading accounting tool specifically developed for small and medium-sized businesses that […]

Read More
A Complete Guide to Salesforce CPQ Contract Amendment and Renewal

Salesforce CPQ software offers robust features for managing pricing, product configurations, and quotations. The capacity to effectively modify and renew contracts is essential for businesses managing intricate agreements and long-term partnerships. In this guide, we’ll walk you through the details of contract amendment and renewal processes in Salesforce CPQ. About Salesforce CPQ Contract Amendments Modifications […]

Read More
Step by Step Guide to Configure Email to Salesforce 1 1

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