Adding Lightning Components to Public Sites using Lightning Out!!!

Hello Folks!!!

You may all be aware of this super feature called Lightning Out, using which you can literally show a Lightning Component anywhere.

So why not use it on public sites then. Let’s see how it works!!!

Before starting the exercise,  below are the prerequisites for you:

  1. You already know how to create Lightning components.
  2. You know how to create Visualforce pages.
  3. You know how to create sites.

If not, please learn about them by clicking the links above.

Now let’s create a simple lightning component to display a list of contacts available in your org. Below given is the code for the same.

Apex Controller

public class ContactViewerController { 
    public static List<Contact> getContacts() {
        List<Contact> lstContact = [SELECT Id, Name, Phone, Email 
                                    FROM Contact];
        return lstContact; 

Lightning Component


<aura:component controller="ContactViewerController">
<aura:attribute name="contacts" type="Object" />
<aura:attribute name="columns" type="List" />
<aura:handler name="init" value="{! this}" action="{! c.doInit}" />
	<lightning:datatable data="{! v.contacts}"
columns="{! v.columns}"

I have used lightning:datatable tag to display contacts here. To know more about this, check here.


({ doInit : function(component, event, helper) {
component.set('v.columns', [
{label : 'Contact Name', fieldName : 'Name', type : 'text'},
{label : 'Phone', fieldName : 'Phone', type : 'phone'},
{label : 'Email', fieldName : 'Email', type : 'email'}


getData : function(cmp) {
var action = cmp.get('c.getContacts');
action.setCallback(this, $A.getCallback(function(response) {
var state = response.getState();
if(state === "SUCCESS") {
cmp.set('v.contacts', response.getReturnValue());
} else if(state === "ERROR") {
var errors = response.getError();
} else {
console.log('UNKNOW ERROR');

Lightning Out Dependency App

Now that we have our lightning component ready, let’s create Lightning Out dependency app as shown below:

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

The lightning dependency app must:

  1. set access control to GLOBAL
  2. extend from ltng:outApp
  3. must list all components as a dependency.

By implementing ltng:allowGuestAccess, we are enabling the lightning app for public access through communities, public sites or any other sites outside Salesforce.

Now, let’s create a visualforce page to display the lightning component.

Visualforce Page

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

That’s it. Now since we are ready with the Visualforce page, all you need to do is to create a public site and set this VF page as the main page for the site.

Try it out and let me know if you get stuck somewhere.


3 thoughts on “Adding Lightning Components to Public Sites using Lightning Out!!!”

  1. hi Thanks for the great Article, in my use case I need to pass some parameters in the Public site URL. How can I achive this, my url would be like :


Leave a Reply

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

You are commenting using your 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 )

Google+ photo

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

Connecting to %s