How to use lightning component on any external platform using Lightning Out Feature

Overview:

In this blog, we will go through steps for using Lightning Out to run Lightning Components outside of the Salesforce server. We will be running the lightning component on Localhost server.

Pre-requisites:

• Configuration in Salesforce for Connected App and CORS.
• Lightning Dependency App in Salesforce.
• We will be using the Node Js to make a server-side call.
• OpenSSL to create a Self-Signed Certificate.

Solution:

Follow the below steps to operate your lightning component from localhost.

Step 1: Whitelists the localhost URL in CORS from Salesforce

The Same-Origin-Policy restricts the browser to make a request to/from the same domain. So to make your origin (external application) able for sending XMLHttpRequest to Salesforce, we will have to whitelist domain of the external application in CORS from Salesforce as shown in the below screenshot.

Step 2: Create a Connected App in Salesforce  

From many ways to authenticate Salesforce from an external website, let's use the most secure way which is OAuth. To use OAuth, you need to create a Connected App. Connected App provides different types of permission settings to allow external websites to use after authentication. Do not forget to set the callback URL in your Connected App.

 

 

Step 3: Create Lightning Dependency App  

To make this app accessible outside of Salesforce, make sure you do not forget the below points, 

• The Lightning App must be globally accessible, which means that access must be defined as global. 
• The ltng:outApp must be extended to allow you to use it outside the lightning framework / Salesforce. 
• To make use of the Aura component as part of Lightning Out, it should be defined as the aura:dependency.
  
  

<aura:application access="Global" extends="ltng:outApp">
      <aura:dependency resource="c:LCSearchFirst" />     
      <aura:dependency resource="c:LCSearchDataTable"/>  
</aura:application> 

Step 4: Generate an X.509 Certificate using OpenSSL 

Generate a valid Self-Signed Certificate for localhost development by running two commands shown in a given reference link.

These commands will create .pem and .crt files, which we will use in the Node.js application to provide a secure connection between two servers.

Step 5: Create Node.js application to make a server call

Create a Node.js application that will use to run on the localhost to make a server call. In this application, use X509 and allow CORS for the localhost.

Step 6: Create a page to host Lightning Component 

To use the Lightning component in your external application, you need to import Lightning out JavaScript in the page hosting your Lightning component, refer to the below markup :  

<script src="https://YOURDomain.lightning.force.com/lightning/lightning.out.js"></script> 

Output:

You can find the complete source code of this blog post from Github

Conclusion:

    

By following the above steps, you can run or host any Lightning Component from your Salesforce server to the localhost. You can implement the same for other platforms also such as Heroku, SharePoint.

If you have any questions you can reach out our Salesforce Consulting team here.