How to use Lightning Web Component inside Visual Force Pages?

Dear #Trailblazers,

In this blog post we are going to learn how to use Lightning Web Component inside Visualforce pages.

Use Cases

You wanted to use the same component in Lightning and Classic
You wanted to use the Lightning Web Component inside the Force.com site or Portals
You wanted to use your LWC component outside of the salesforce

In this blog post, we are going to use the concept of Lightning Out so that we can use our component inside Visual force pages.

So let’s start

Step1 – Create a Lightning Web Component

you can use below code for the component and deploy it to your salesforce org.

Note:- The name of my component is helloWorldComponent

<!--
    @description       : 
    @author            : Amit Singh
    @group             : 
    @last modified on  : 03-23-2021
    @last modified by  : Amit Singh
    Modifications Log 
    Ver   Date         Author       Modification
    1.0   03-23-2021   Amit Singh   Initial Version
-->
<template>
    <lightning-card  variant="Narrow"  title="Lightning Out Demo" icon-name="custom:custom16">
        <lightning-button-icon  icon-name="utility:down" variant="border-filled" alternative-text="Show More" slot="actions"></lightning-button-icon>
        <p class="slds-p-horizontal_small">Here there this message is coming from LWC (custom component)</p>
        <p class="slds-p-horizontal_small">{message}</p>
        <p slot="footer">Card Footer</p>
    </lightning-card>
</template>

And here is the JavaScript Code

/**
 * @description       : 
 * @author            : Amit Singh
 * @group             : 
 * @last modified on  : 03-23-2021
 * @last modified by  : Amit Singh
 * Modifications Log 
 * Ver   Date         Author       Modification
 * 1.0   03-23-2021   Amit Singh   Initial Version
**/
import { api, LightningElement } from 'lwc';

export default class HelloWorldComponent extends LightningElement {
    @api message;
}

Now, we will be needing an intermediate Aura Application. Why we need this application is because we can not directly use LWC or AURA inside VF so we have to define the dependency inside the Aura Application

Step2 – Create Aura Application

This aura application will act as a wrapper to our Lightning web component. So once you have created the application then provide the dependency to our application.

Note:- The name of My Aura Application is helloWorldApp

<aura:application extends="ltng:outApp" >
    <c:helloWorldComponent></c:helloWorldComponent>
</aura:application>

In the above code you have seen that we are extending some other application/component which is ltng:outApp, this is the key here if we do not extend ltng:outApp we will not be able to use our Aura or LWC inside VF page.

Step3 – Create a VF Page

Now, the final step is to create a visual force page which will have either LWC or Aura inside the same. For our, demo it will be having LWC.

Loading and Initializing Your Lightning Components App

To load your LWC or Aura Component inside VF page we will use $Lightning.use() method.

The $Lightning.use() function takes four arguments.

Name	Type	Description
appName	string	Required. The name of your Lightning dependency app, including the namespace. For example, `“c:helloWorldApp”`.
callback	function	A function to call once the Lightning Component framework and your app have fully loaded. The callback receives no arguments. This callback is usually where you call `$Lightning.createComponent()` to add your app to the page (see the next section).
lightningEndPointURI	string	Optional if you are using inside Salesforce. The URL for the Lightning domain on your Salesforce instance. For example, https://`MyDomainName`.lightning.force.com.
authToken	string	Optional if you are using inside Salesforce.

Here is the complete code

<!--
    @description       : 
    @author            : Amit Singh
    @group             : 
    @last modified on  : 03-21-2021
    @last modified by  : Amit Singh
    Modifications Log 
    Ver   Date         Author       Modification
    1.0   03-21-2021   Amit Singh   Initial Version
-->
<apex:page showHeader="false" sidebar="false">
    <apex:includeLightning />    
    <div id="LightningComponentid" />   
<!-- the Id of div tag which will be used to render your LWC component  -->
    <script>
        $Lightning.use("c:helloWorldApp", function() {
            $Lightning.createComponent("c:helloWorldComponent",
            { 
                message   : 'Simple Message From VF Page', // You can pass the value to @api attributes if you have inside JavaScript Class.
                recordId : '{!$CurrentPage.parameters.id}'
            },
            "LightningComponentid", // the Id of div tag where your component will be rendered
            function(cmp) {
                console.log('Calling the LWC Component');
            });
        });
    </script>
</apex:page>