Lightning Out is a powerful feature where you can take your components built inside SFDC to the external system .The Program is under BETA currently .
I have been building lightning components since last year and this year more than half of my time I have been working with lightning components .In fact this year in one of the community led conferences,SEDreamin in Atalanta ,I along with one my colleague architect at CodeScience INC got opportunity to present on lightning components .
If you are interested on slides ,we have the slides on the slideshare and also the code on the github repo .
So in this post ,we will take one of those lightning components to outside salesforce system .We will be pushing this components to heroku .The Heroku app build will be using Node JS .So this article assumes you have knowledge on NodeJS.
2.A free Heroku account .You can install Heroku toolbelt depending on your operating system
3.We are using express and ejs npm package .Using Express and EJS you can build node applications super fast with minimal effort .Ejs has an awesome templating mechanism with excellent support for javascript
Salesforce Configuration
This is a security feature again and found in security controls
Lets take a look at the app.js file which triggers the flow
Here are the key highlight from the code
The key points to look for
1.Observe how simple it is to write four lines of code to inject the lightning component into the page
2.The EJS template engine makes our life lot simpler to inject variables .
The entire code is in my github repo if you want to take a peek .
Lets watch the video of the component running outside SFDC
Please let me know the feedback on this post via twitter or mail . Happy Hacking :)
I have been building lightning components since last year and this year more than half of my time I have been working with lightning components .In fact this year in one of the community led conferences,SEDreamin in Atalanta ,I along with one my colleague architect at CodeScience INC got opportunity to present on lightning components .
If you are interested on slides ,we have the slides on the slideshare and also the code on the github repo .
So in this post ,we will take one of those lightning components to outside salesforce system .We will be pushing this components to heroku .The Heroku app build will be using Node JS .So this article assumes you have knowledge on NodeJS.
Libraries Used
1.nforce - This is a utility that provides ability to obtain access token via oauth (web server flow mechanism)2.A free Heroku account .You can install Heroku toolbelt depending on your operating system
3.We are using express and ejs npm package .Using Express and EJS you can build node applications super fast with minimal effort .Ejs has an awesome templating mechanism with excellent support for javascript
Salesforce Configuration
1.Create a simple Connected App
2.Create a CORS record for your heroku domain
This is a security feature again and found in security controls
Lets take a look at the app.js file which triggers the flow
Here are the key highlight from the code
- We use the nforce library to request for the oauth token
- We store the oauth token using app local variables so that we can retrieve this in our templates
The key points to look for
1.Observe how simple it is to write four lines of code to inject the lightning component into the page
2.The EJS template engine makes our life lot simpler to inject variables .
The entire code is in my github repo if you want to take a peek .
Lets watch the video of the component running outside SFDC
Lightning Out from Mohith Kumar Shrivastava on Vimeo.
Please let me know the feedback on this post via twitter or mail . Happy Hacking :)
It's quite attention-grabbing journal post value of reading. I actually grateful for giving a chance to browse an informative article like this! i actually appreciate this post thanks for sharing these form of posts.
ReplyDeleteFast dedicated servers
hi Mohit
ReplyDeleteAccess to XMLHttpRequest at xxxxx from origin xxxx has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Even though we have whitlsited in Salesforce CORS, we get this error. In you sample, do we need to include the request header Access-Control-Allow-Origin?
did you find any solution for this ?
DeleteWere you able to fix this?
DeleteCreating an app using Lightning Out is, for the most part, much like creating any app with Lightning components. However, because your components are running “outside” of Salesforce, there are a few issues you want to be aware of. And it’s possible there are changes you might need to make to your components or your app.Thanks for sharing~ Charlotte W. from cloud app development
ReplyDeleteThat appears to be excellent however i am still not too sure that I like it. At any rate will look far more into it and decide personally!
ReplyDeleteDominoQQ Online
Thankyou for this wondrous post, I am glad I observed this website on yahoo.
ReplyDelete유로파리그중계
This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free.
ReplyDeletepanadolqq
I understand that you can display records, but can you create records using the Lightning Out from a LWC?
ReplyDeleteHi, I'm facing the next issue.
ReplyDeleteAccess to XMLHttpRequest at 'https://resilient-otter-hrylz5-dev-ed.lightning.force.com/c/AuraApp.app?aura.format=JSON&aura.formatAdapter=LIGHTNING_OUT' from origin 'https://ltngoutappcmduquer3.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I did create a record for cors and another for csp trusted sites.
Do you have any solution?