Display Lightning Component on VisualForce Page

Today we discuss how to display lightning Components on visualforce page, we have designed multiple lightning components in lightning to achieve functionality for clients. If you want to show you the existing lightning component on visualforce page.

LightningComponent.cmp

<aura:component>
  <div>
    <h1> Iam a lightning Component</h1>
  </div>
</aura:component>

LightningApplication.app

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

• ltng:outApp allow you to implement SLDS functionality on  lightning component.
• Global initialization helps you to access lightning components all over in your salesforce org.
• The resource is helping us to call the lightning component into our lightning application.

Visualforce page

  <apex:page showHeader="false" sidebar="false">
  <apex:includeLightning />
   <div style="width:30%;height:100px;" id="LightningComponentid" />
   <script>
    $Lightning.use("c:LightningApplication", function() {
     $Lightning.createComponent("c:LightningComponent",
     {
     /* you can add your custom css */
     },
     "LightningComponentid",
     function(cmp) {
     console.log('Display Lightning component in visualforce page');
     });
     });
     </script>
</apex:page>

• Show header is equal to false which hides header in our visualforce page.
• The sidebar is equal to false which hides the sidebar in our visualforce page.
• $Lightning.use calling the lightning application of our org into visualforce page.
• create component which helps us to view lighting component in our visualforce page.
• LightningComponentid assigned id to div tag which shows to display output of lightning component in visualforce page.
• console.log is similar to system.debug in visualforce page which helps to debug Javascript controller.
• if you are looking to change UI of lightning component you can add your custom CSS.