Lightning out in Salesforce

Lightning out is a feature by which we can use our lightning component inside of an external site. One of the best advantage is we can use our lightning component inside visualforce page.


The three simple way we need to follow to have our lightning component works on visulaforce page is:

1)Include the Lightning Out JavaScript libraries using <apex:includeLightning /> on visualforce page.

2)Specify the lightning app by extending it with ltng:outApp which will specify component dependency.

3)create the component on the page.

Now the questions arise What is lightning out dependency?

When a Lightning components app is initialized using Lightning Out, Lightning Out loads the definitions for the components in the app. To do this efficiently, Lightning Out requires you to specify the component dependencies in advance, so that the definitions can be loaded once, at startup time.The mechanism for specifying dependencies is a Lightning dependency app. A dependency app is simply an <aura:application> with a few attributes, and the dependent 
components described using the <aura:dependency> tag.

Basic syntax:

<aura:application access="GLOBAL" extends="ltng:outApp">

    <aura:dependency resource="c:myAppComponent"/>

</aura:application>


Key points to remember:

1) Lightning app access should be set to GLOBAL.
2) It can be extends either using ltng:outApp or ltng:outAppUnstyled.
3) List as a dependency every component that is referenced in a call to $Lightning.createComponent().

$Lightning.use() refer to Lightning application and is used to load and initialize lightning component. It has the callback function $Lightning.createComponent(). $Lightning.createComponent() refer the Lightning component and is use to pass the attribute from Vf page to Lightning component. The domLocator with $Lightning.createComponent() 
is used to display component.

Let us see a simple example:

COMPONENT (Name: LightningCompForVF)

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
<div>
    FROM LIGHTNING COMPONENT    
    </div>
</aura:component>


LIGHTNING APP (Name: LightningCompForVFAPP)

<aura:application access="GLOBAL" extends="ltng:outApp">

    <aura:dependency resource="c:LightningCompForVF"/>

</aura:application>

VISUALFORCE PAGE (Name: VfPageToCallLightningComp)

<apex:page >
    <apex:includeLightning />
    <div  id="LightningCompContainer" />  <!--Used to display lightning component-->
     
    <script>
        $Lightning.use("c:LightningCompForVFAPP", function() {
            $Lightning.createComponent("c:LightningCompForVF", { },
            "LightningCompContainer",
            function(cmp) {
                alert('Component created');
            });
        });
    </script>
</apex:page>