How To Show Lightning Application in Visualforce Page

Before proceeding let’s learn some methods, class and tags which we are going to use:

1). extends =”ltng:outApp” : We extends our lightning app to lightning out app. It provides permission to use our lightning app in visualforce page without any authentication. It adds SLDS resource to our app which style component according to lightning design system. If you don’t want to style then use ltng:outAppUnstyled

2).  apex:includeLightning : It imports necessary dependencies and scripts to enable Visualforce to act as Lightning component container.

3). $Lightning.use() : It is use to refer Lightning Application which extends ltng:outApp or  ltng:outAppUnstyled . It is used in JavaScript.

4). $Lightning.createComponent() : This method is used to create component dynamically.

#Step 1: Create a lightning out app let’s say dependencyExample.app as follows:

<aura:application extends="ltng:outApp" access = "GLOBAL">
    <!-- access glabal means you can call this app from anywhere in your org --> 

    <!-- 
      /**
         * Webkul Software.
         *
         * @category  Webkul
         * @author    Webkul
         * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
         * @license   https://store.webkul.com/license.html
         */
	-->
	
    <aura:dependency resource="c:accListJs"/> <!-- contains the component name which you want to show in vf page-->
    
    <!-- if your component is belong to any managed package use resource="NameSpace:componentname" -->
</aura:application>

#Step2 : Create Visualforce Page and write following code.

<apex:page>
    
    <!-- 
      /**
         * Webkul Software.
         *
         * @category  Webkul
         * @author    Webkul
         * @copyright Copyright (c) 2010-2017 Webkul Software Private Limited (https://webkul.com)
         * @license   https://store.webkul.com/license.html
         */
	-->
    
    <apex:includeLightning />

    <div id="accList" /> <!-- where you want to show the lightning component -->

    <script>
    $Lightning.use("c:dependencyExample", function() { // Lightning out app 
            // Create component dynamically
            $Lightning.createComponent("c:accListJs", // name of the lighting component
                                     {"pageNumber" : "1"}, //Attribute of the component
                                     "accList", //id of the visualforce component where lighting component will show
                                     function(cmp) { //callback function
              // write the code 
          });
        });
    </script>
</apex:page>