Write a JavaScript function on the visualforce page that creates the component on the page dynamically using Lightning App using $Lightning.createComponent().

What is lightning outApp?
Use Lightning Out to run Lightning components apps outside of Salesforce servers. Lightning outApp lets you embed Lightning components on almost any type of web page or web app. Whether it’s a Node.js app running on Heroku or any other platform.

Let’s create a simple lightning component and use it on a visualforce page.

Step-2: Open the CustomApp.appand paste the below code.

CustomApp.app

1

2

3

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

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

</aura:application>

What is Lightning Out Dependency?
It is used to describe the component dependencies of a Lightning components app to be deployed using Lightning Out. When a Lightning components app is initialized using Lightning Out, it loads the definitions for the components in the app. Specifying component dependencies loads components fast and efficiently.

So our component is now ready to use, let’s stick it to VF page now.

Step-3: Open the LightningVFpage.pageand paste the below code.

LightningVFpage.page

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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

<apex:includeLightning/>

<div id="lightning"/>

<script>

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

$Lightning.createComponent(

"c:lightningOnVF",{

'title':'Lightning On VF Page',

'isLightningExperience':isLightningExperience()

},"lightning",

function(cmp){

console.log('Lightning Component Loaded');

});

});

functionisLightningExperience(){

if('{!$Currentpage.parameters.sfdcIFrameOrigin}'!='')returntrue;

returnfalse;

}

</script>

</apex:page>

How to pass parameters/ set attributes of a lightning component?
Here we have passed 2 parameters to the lightning component. While calling a component here pass the parameters value the same way as we pass in dynamic component creation. The attributes should e public or global.

Our code is ready now, run it and check if your component open here. Cheers…..:)