Hello Ohana!!

Hope you all are doing well.

I started blogging so that I can share my experiences and tech tips with others who need help with your projects. And I always like to go back and check statistics to see how am I faring in this.

So I found that my blog Adding Lightning Components to Public Sites using Lightning Out!!! had the maximum number of views, thanks you to all. So may be I thoughts it’s time to upgate it and teach you all how to add LWC components to public sites.

So I am taking the same example here as in my old blog, which means I am considering that you already knew:

  1. how to create Lightning Web Components,
  2. how to create Visualforce pages,
  3. and how to create Force.com sites.

At first, let’s create a simple apex controller to get Accounts from your org.


public class AccountViewController {
    public static List<Account> getAccounts() {
        return [SELECT Id,Name,Phone FROM Account];

Now, create a Lightning Web Component to display list of contacts. I have named my bundle accountView.


    <div style="height: 300px;">


import { LightningElement, wire, track} from 'lwc';
import getAccounts from '@salesforce/apex/AccountViewController.getAccounts';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class AccountView extends LightningElement {
    @track accounts;
    @track columns = [
            label: 'Account Name',
            fieldName: 'Name',
            type: 'text',
            sortable: true
            label: 'Phone',
            fieldName: 'Phone',
            type: 'text',
            sortable: true

    wiredAccounts({data, error}) {
        if(data) {
            this.accounts = data;
        else if(error) {
            const errEvent = new ShowToastEvent({
                title: 'Accounts Not Found.',
                message: error.body.message,
                variant: 'error',

As our Lightning Web Component is ready, let’s create a Lightning Out dependency app (named AccountViewApp) as shown below:


<aura:application extends="ltng:outApp" access="GLOBAL" implements="ltng:allowGuestAccess">
    <aura:dependency resource="c:accountView" />

Once done, let’s create a Visualforce page to show the Aura App.

In your page, at first add the <apex:includeLightning /> tag.

Next, add a Javascript code to load and activate your lightning app. Here, we are using two main markup functions, $Lightning.use() and $Lightning.createComponent(). To know more about them, check here.


<apex:page showHeader="false" standardStylesheets="false">
    <apex:includeLightning />
    <div id="dataTable" />
        $Lightning.use("c:AccountViewApp", function() {
                {msg: "Account View LWC."},
                function(cmp) {
                    console.log('LWC Component Created.');

That’s it. We are ready with our Visualforce page. All you need to do now is to create a public site, give access to Account object, the visualforce page and the apex class.

For your reference, check my Git Repo.

Happy Coding Folks!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s