Lightning Out for Lightning Applications

Till now, we have “lightning component” access limited to salesforce org itself. But from Salesforce Spring ’16 Release, we can run Lightning Components Apps Anywhere.

Whether it’s a Node.js app running on Heroku, a department server inside the firewall, or even SharePoint, build your custom app with Force.com and run it wherever your users are.

 There are simple steps to use Lightning Out.

1. Setup and preparation.
2. Create a reference to a Lightning Components app that includes dependency information about the components you intend to use.
3. Create components on the page to build the page’s functionality.

Follow the below steps.

1) Create the component.

ltngout.cmp

<aura:component>

         Hello! Lightning Out is here!!

</aura:component>

 2) Create the application.

LightningOut.app

<aura:application access="Global" extends="ltng:outApp" implements="ltng:allowGuestAccess " >

    <aura:dependency resource='c: ltngout />

</aura:application>

 Extending “ltng:outApp”, makes your lightning bundle publically available. Once you extend “ltng:outApp”, and you try to preview the app, it won’t run.

 3) Now create the visualforce page from where you want to run lightning app using Lightning out.

<apex:page showHeader="false" sidebar="false"    >

    <apex:includeLightning />

    <div id="lightning" />

    <script>

        $Lightning.use("c:LightningOut ", function() {

          $Lightning.createComponent("c:ltngout",

          {  },

          "lightning",

          function(cmp) {

            // do some stuff

          });

        });

    </script>

</apex:page>
c:LightningOut - Lightning application name.
c:ltngout - Lightning component name.

 Now, preview the vf page, you will see the lighting application. 

Congrats you have learned Lightning Out.
Happy Learning!!