Salesforce Lightning Out
Salesforce lightning out provides the ability to run lightning web components or aura components on an external website / web app. The process is pretty simple however became frustrating as well, which I will point out why. There are a couple of steps and requirements in order to make this work:
- Create Your Component
- Create an Aura Dependency App
- Identify Your Hosting Site and add it to CORS
- Create an Experience Site
- Add Javascript and HTML to the Site
We will go through the process on how to add a Simple Hello World LWC to a github pages site. Also *NOTE* you will need to use a developer org or a real salesforce org (a sandbox would work) which I will explain why.
Create Your Component
You could either create a LWC or Aura component that you were thinking about or use this one for demonstration purposes and in order to test out the Salesforce lightning out capabilities:
<template>
<article class="slds-card">
<div class="slds-card__body slds-card__body_inner">Hello World Lightning Out Lightning Web Component</div>
</article>
</template>Above is the html for the lightning out lightning web component the rest can be the default settings.
Create an Aura Dependency App
Next create the Aura dependency app, this is specifically to indicate to Salesforce which components can be used for in lightning out. Go to Developer Console then File –> New –> Lightning Application:
Next create the App name:
Then change the following to extends=”ltng:outApp” (this will use the slds stylesheets if you would like to experiment without or the application has a much different style use “ltng:outAppUnstyled”). For this example we will be allowing unauthenticated users to be able to access this which requires to add implements=”ltng:allowGuestAccess”. If you want only authenticated users you don’t need this.
<aura:application access="GLOBAL" extends="ltng:outApp" implements="ltng:allowGuestAccess">
<aura:dependency resource="c:helloWorld" />
</aura:application>Identify Your Hosting Site and add it to CORS
In order to use Lightning Out the website domain that the aura app will be on will need to be added to CORS. To do this go to Setup –> CORS –> New –> Add the Domain to CORS. If you are not familiar with CORS that is okay, but essentially it allows browsers to be able to communication with other domains.
Create an Experience Site
Even though we will be adding the application to an external site we need to create an experience site to add the component or set of components. This is required whether you are requiring authentication or not.
Go to Setup –> All Sites –> New (or you can use existing) –> follow the prompts to create the site.
Add Javascript and HTML to the Site
To show this I will be creating a github page using instructions based on this Github document.
When creating the github repo add a file called index.html this will serve the resources from the repo on to the pages. Next add the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="lightningout"></div>
<script src="<My Domain URL>/lightning/lightning.out.js"></script>
<script>
$Lightning.use(
'c:LightningOutDependencyApp', // name of the Lightning app
function () {
// Callback once framework and app loaded
$Lightning.createComponent(
'c:helloWorld', // top-level component of your app
{}, // attributes to set on the component when created
'lightningout', // the DOM location to insert the component
function (cmp) {
// callback when component is created and active on the page
}
);
},
'<Experience Site URL>' // Site endpoint
);
</script>
</body>
</html>The main pieces that make this work is the <script src=”<My Domain URL>/lightning/lightning.out.js”> this loads the lightning out javascript files into the browser. The Next important part is the:
$Lightning.use(
'c:LightningOutDependencyApp', // name of the Lightning app
function () {
// Callback once framework and app loaded
$Lightning.createComponent(
'c:helloWorld', // top-level component of your app
{}, // attributes to set on the component when created
'lightningout', // the DOM location to insert the component
function (cmp) {
// callback when component is created and active on the page
}
);
},
'<Experience Site URL>' // Site endpoint
);This identifies the dependency app then loads the specified component, in this case c:helloWorld, and places it onto the page based on an HTML element location in this case: <div id=”lightningout”></div> and finally specifies the site endpoint that is being used. If the application is going to authenticate and pass in the Session Token you can add it after the experience site endpoint.
If you would like to learn more about the markup take a look at this page.
Once created it will take a little while for Github to create the page. You can take a look at it here.
Quick Note
One quick note if you are looking to create a component that uses Apex and needs access to any objects make sure the appropriate profiles have access. In this scenario if I wanted the Hello World Lightning Web Component to be able to use an Apex controller and query an object as an example. The guest experience site profile will need access to the apex controller and the objects.
Also if you are using a trailhead org whenever I tried to use Lighting Out for an example I would add the domain site to CORS however it would still not work. I would receive the following error and needed to use a dev org and / or sandbox to learn how to use this: Access to XMLHttpRequest at ‘<salesforce lightning out endpoint>’ from origin ‘<domain endpoint>’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Checkout My New Course:
Crush It As A Salesforce Developer: Mastering Apex
Test Your Knowledge:
Try the new Salesforce Developer Quiz