Creating a Lightning Out application 

To create a Lightning Out application, the page will need a little JavaScript code, as shown here:

<script>
    $Lightning.use("c:youtubesearchOutApp", // name of the Lightning Out app
        function() { // Callback once framework and app loaded
            $Lightning.createComponent(
                "c:youtubesearch", // top-level component of your app
                { }, // attributes to set on the component when created
                "LightningLocator", // the DOM location to insert the component
                function(cmp) {
                    // callback when component is created and active on the page
                }
            );
        },
        'https://<myDomain>.Lightning.force.com/' ,// endpoint
         accessToken // access Token by authenticating to Salesforce
    );
</script>

The HTML page will need the following JavaScript script tag to load the Lightning Out library from the Salesforce domain, as shown here:

<script src="https://<myDomain>.my.salesforce.com/Lightning/Lightning.out.js"></script>

The code for the HTML page will be as follows:

<!DOCTYPE html>
<html>
<body>
    <h1>Lightning Out Youtube Search Component Demo</h1>
    <script src="https://ability-page-3410-dev-ed.my.salesforce.com/Lightning/Lightning.out.js"></script>
    <script src="app.bundle.js/app.bundle.js"></script>
    <div id="youtubeApp" />
</body>
</html>

Let's create the app.js entry file, which will primarily undergo the following steps:

OAuth with Salesforce to obtain the token
Execute the Lightning Out scripts to render the Lightning Out component

The app.js code is as follows:

import {OAuth} from 'forcejs';


let oauth = OAuth.createInstance("<clientId>"
                                ,"<sandbox/login url>",
                                "<redirectURL>"
                                );
oauth.login()
  .then(oauthResult => {
        //console.log(oauthResult);
        renderLightningOutComponent(oauthResult);
    });


let renderLightningOutComponent = (oauthResult) => {
    const token = oauthResult.accessToken;
    const LightningEndPointURI = "https://ability-page-3410-dev-ed.Lightning.force.com";
    $Lightning.use("c:youtubesearchOutApp", () => {
        $Lightning.createComponent("c:youtubesearch", {},
           "youtubeApp",
            (cmp) => {
               //Component COde
            });
  },LightningEndPointURI,token );

}

Note that with forcejs, the OAuth process can be done with this:

 oauth.createInstance("<clientId>","<sandbox/login url>","<redirectURL>")

clientId is the consumer key obtained from the connected app. login url will be login.salesforce.com for the developer Org and PROD, and for the sandbox and scratch Org it is test.salesforce.com. The redirect url is the Heroku callback URL.

Notice that once we perform OAuth, we use the following code to create the Lightning Out component on the div with the ID youtubeApp:

let renderLightningOutComponent = (oauthResult) => {
    const token = oauthResult.accessToken;
    const LightningEndPointURI = "https://ability-page-3410-dev-ed.Lightning.force.com";
    $Lightning.use("c:youtubesearchOutApp", () => {
        $Lightning.createComponent("c:youtubesearch", {},
           "youtubeApp",
            (cmp) => {
               //Component 
            });
  },LightningEndPointURI,token );

To create a bundle using webpack, run the following command. This generates a bundle that is imported in the HTML file:

npm run webpack

On successful build, the Terminal screen will resemble the following screenshot:

Table of Contents for Creating a Lightning Out application&#xA0;

Create new playlist

Sign In

Sign Up

Table of Contents for
Creating a Lightning Out application