Add a Lightning application within a Visualforce page in Salesforce

 

<!-- create a lightning app with global access that extends lightning outApp-->  

YourLightningComponent.app

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

    <aura: dependency resource="lightning: button"/>  

</aura: application>  

<apex:page >

    <apex:includeLightning />

    

    <div id="lightningContainer"></div>

    <script>

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

            $Lightning.createComponent(

                "c:YourLightningComponent",

                {},

                "lightningContainer",

                function(cmp) {

                    console.log("Component created successfully: ", cmp);

                }

            );

        });

    </script>

</apex:page>

In this example -

apex:includeLightning is used to include the Lightning runtime in the Visualforce page.

Inside the <script> tag, $Lightning.use loads the specified Lightning app (replace "c:YourApp" with your Lightning application's namespace and name).

$Lightning.createComponent creates the specified Lightning component (replace "c:YourLightningComponent" with your Lightning component's namespace and name) and injects it into the specified DOM element ("lightningContainer" in this case).