Show Lightning Component in Node.js using Lightning Out

Use Lightning Components on external websites – Lightning Out

If you were the users of IGoogle, few years back, you would be excited to know that web development is progressing in that direction. Architect of web application development is getting shifted towards component based development by introducing concepts like Web Components and frameworks like polymer and Lightning Components. One of the possible use case of component driven development is ability to use whole component externally. In IGoogle, components were built by partners and then was exposed as widgets to be used on your custom Google home page. Salesforce product team, being visionary came up something like this by introducing Lightning Out. With the help of Lightning Out, we can surface our existing Lightning Component to external websites. Previously, we already discussed that how Lightning components can be used on Visualforce pages using Lightning Out.

Let’s see how we can do it.

You can find complete source code of this blog post in my Github repository.

Step 1 : Consider below simple Lightning application, name its as LightningOutDemo

<aura:application access="Global" extends="ltng:outApp">
    <aura:dependency resource="forceChatter:feed" type="COMPONENT" /> 
</aura:application>

There are few things to note in above code.

  • Global access is defined at Lightning application informing that this application can be used globally in Salesforce instance
  • ltng:outApp – This component extends ltng:outApp indicating that this can be used outside Lightning framework, like in Visualforce page
  • aura:dependency – This tag indicates, which component can be used to show as part of Lightning Out.

We are using standard Lightning component forceChatter:feed, which will show a logged in user’s chatter feed.

Next step is to create a SSL certificate which can be used in Node.js application. This step is important, as Lightning component would be rejected by Same-origin policy and we can fix it by adding our Node.js application’s URL in Salesforce CORS (Cross-Origin Resource Sharing) setting.

Step 2 : Create X.509 Certificate using OpenSSL

Download OpenSSL from here and run below commands to create self signed certificate.

openssl req -newkey rsa:2048 -new -nodes -keyout key.pem -out csr.pem
openssl x509 -req -days 365 -in csr.pem -signkey key.pem -out server.crt

Above command will create two files – server.crt and key.pem which needs to be used in Node.js application.

Step 3 : Create Node.js Application

I would be using almost same code as of my previous post where we built Simple Salesforce IDE using Tooling API. However there are three below major changes in Node.js application.

a. Allow CORS in Node.js

Below method is added in Server.js file which enables Cross Origin Resource Sharing (CORS).

/*Allow CORS*/
app.use(function(req, res, next) {
	 
	res.setHeader('Access-Control-Allow-Origin', '*');
	res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version, X-Response-Time, X-PINGOTHER, X-CSRF-Token,Authorization,X-Authorization'); 
	res.setHeader('Access-Control-Allow-Methods', '*');
	res.setHeader('Access-Control-Expose-Headers', 'X-Api-Version, X-Request-Id, X-Response-Time');
	res.setHeader('Access-Control-Max-Age', '1000');
	  
	next();
});

b. Use SSL (X.509) with Node.js

var options = {
  key: fs.readFileSync('./key.pem', 'utf8'),
  cert: fs.readFileSync('./server.crt', 'utf8')
};
   
https.createServer(options, app).listen(8081);

c. Include Lightning Out Javascript

To use Lightning component in our external application, we need to import Lightning out Javascript file, which can be found at

https://YOUR-DOMAIN.lightning.force.com/lightning/lightning.out.js

Don’t feel like you are lost in ocean from above steps 😉 , complete source code can be found at my Github repository here.

Step 4. Create Connected App in Salesforce

There are many ways to authenticate Salesforce from your website. Most secure and recommended way is to use OAuth. To use OAuth, we need to create a Connected App in Salesforce which contains various settings like what can be accessed by external application and after authentication where to redirect Salesforce login etc. If you are creating Connected app first time in Salesforce, then please visit this URL for detailed information. Make sure that callback URL in your connected app is https://localhost:8081/oauthcallback.html. Once Connected app is created, copy consumer key and update OAuth.js file with this key.

Step 5. Enable CORS in Salesforce

This step is to add our Node.js application in CORS setting of Salesforce. It allows, our Node.js application to use Salesforce resources like Javasript and CSS. So save https://localhost:8081 in CORS setting of Salesforce.

Step 6. Finally running Node.js application to use Lightning Component

If you are at this stage that means you already have Lightning out enabled Lightning application, connected app and Node.js application. Assuming, you have downloaded source code from github repository, run below commands in downloaded directory.

npm install
npm start

If everything works fine, you will see message on console saying Server listening for HTTPS connections on port 8081.

Navigate to https://localhost:8081/ and you will see page asking to login. After successful login, below page would be displayed, which is nothing but Lightning Component running in Node.js using Lightning Out.

Lightning Component in Node.js application
Lightning Component in Node.js application

Demo Video explaining code


Related Posts

Comments

21 responses to “Use Lightning Components on external websites – Lightning Out”

  1. Kishlay Mathur Avatar
    Kishlay Mathur

    Hi Jitendra,

    when i am trying to generate certificate I am getting below error https://uploads.disquscdn.com/images/50cd0fbc9ed6e57709bbf3b0a30ca5d8db4c57ac380c8554e15dfa3f484d0281.png

    1. Jitendra Zaa Avatar

      Try to run command in folder where openssl is extracted / installed OR add openssl bin folder path in environment variable.

  2. Rohit Patil Avatar
    Rohit Patil

    Hi Jitendra,

    I want to redirect the user from e-commerce website to salesforce Lightning component. Can you please let me know on how can I approach on this? I am not aware of Node.js, so without using Node.js is it possible? Please suggest.

    Thanks,
    Rohit

  3. David Avatar
    David

    Hi Jitendra, any example of the other way around? how to embed an external web app (HTML5, etc) within a Lightning page? I was pointed to Salesforce Canvas feature.

  4. David Avatar
    David

    Hi Jitendra, useful post. Can you give examples of how to embed an external Web app (HTML5, …) within a Ligthning page? I was pointed to Canvas, but never use it before. Thanks!
    David

  5. Bob Avatar
    Bob

    I am seeing error with inline.js not found – 404. This happens after the .app?aura… call and the component is not shown.
    Have you see this before?

  6. Code Werks Avatar
    Code Werks

    Hi Jitendra and others,

    I’m receiving the following error Error: listen EADDRINUSE :::8081
    I set everything up on a clean Mac (certs, connected app etc).

    At one point I was able to change all references to port 3000, which avoided the error when starting ‘npm start’ or even ‘node server.js’. The server would start and the web page would display but never show a component.

    Thanks for all your great examples so far.

  7. Sudipto Mukherjee Avatar
    Sudipto Mukherjee

    Hi Jitendra,

    I have created 3 lightning component and I am calling the components from 3 different html pages. I have added the html pages to the local host I created. But I am receiving the following error on the browser console “No Access-Control-Allow-Origin” for all the Static Resource scripts that I am trying to load using ltng:require. I have added the local host address to CORS, but yet I am receiving this error. Can you please help me out. Thank you.

    1. sandeepkumargaddam Avatar
      sandeepkumargaddam

      Hello Mukherjee were you able to solve this error i am also getting the same.

  8. Andrea Catalano Avatar
    Andrea Catalano

    Hi Jitendra, thank you for very useful content!
    Just wondering if have you seen this implemented and working for iOS devices using Safari browser with “Prevent cross-sete tracking” option enabled!
    Thanks,
    Andrea

  9. Ashish Jain Avatar
    Ashish Jain

    Hi Jitendra,

    I have implemented the same. its working perfect… Thanks a lot for such a nice step by step guidelines.

    But the only issue which i am facing after Oauth from Integration user in Portal. When you will open salesforce in next tab same browser. your salesforce Existing profile will be overridden by the Integration user which you can see in lightning mode only. due to session and cookies.
    Any Help will be really appreciated… Thanks a lot in advance.
    Thanks,
    Ashish Jain

  10. Jordan Vasquez Avatar
    Jordan Vasquez

    Hi,

    I have been trying to follow this but I get this error when attempting to use my Lightning Dependency App:

    Action failed: ltng:outApp$controller$init [Incorrect usage of ltng:outApp. Refer to the ‘Lightning Components Developer Guide’ for correct usage]
    Failing descriptor: {ltng:outApp$controller$init}

    Any help would be appreciated thanks!

    1. sandeepkumargaddam Avatar
      sandeepkumargaddam

      Jordan were you able to solve this issues i am getting same error

  11. Kusuma Avatar

    Hi Jitendra,

    I implemented the same in my sandbox and tried to view the display from Local Host. I am getting an error[ Failed to load resource: net::ERR_NAME_NOT_RESOLVED] This is working perfectly in my DEV Org but If I run from my sandbox this is the error I am getting.

    Can you please help me with this?

    1. geeta Avatar
      geeta

      Hi Kusuma,

      Are you able to resolve the issue?
      Even we are getting the same issue

  12. Sathish Avatar
    Sathish

    is lightning out still supported? Will it support LWC as well?

  13. Sudarshan Karanth Avatar
    Sudarshan Karanth

    I am new to salesforce, I have seen this example, Its very helpful for me, I have couple of questions,
    I am getting error CORS for leading fonts from salesforce
    Also the chatter buttons (Like, Comment, Share) are not working
    Is there any work work around

  14. Gaurav Nawal Avatar
    Gaurav Nawal

    Hi Jitendra

    We have an ask from one of our customers, who want to expose Salesforce dashboards to their own website? This should be available to public irrespective of their users within Salesforce. Do you believe we can meet this requirement by above?

    Cheers!

  15. […] Lightning Out [Beta] […]

    1. Vignesh M Avatar
      Vignesh M

      hi jitendra ,
      i am facing This page has an error. You might just need to refresh it. Error during LWC component constructor phase: [Illegal constructor.] Failing descriptor: {wave:analyticsSpinner}
      this bug when clicking dashboard in external application. spinner is not loading so it throws the bug

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from Jitendra Zaa

Subscribe now to keep reading and get access to the full archive.

Continue Reading