{"id":5987,"date":"2017-04-05T13:23:35","date_gmt":"2017-04-05T13:23:35","guid":{"rendered":"http:\/\/www.jitendrazaa.com\/blog\/?p=5987"},"modified":"2017-04-06T19:32:50","modified_gmt":"2017-04-06T19:32:50","slug":"use-lightning-components-on-external-websites-lightning-out","status":"publish","type":"post","link":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-lightning-components-on-external-websites-lightning-out\/","title":{"rendered":"Use Lightning Components on external websites &#8211; Lightning Out"},"content":{"rendered":"<p style=\"text-align: justify;\">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 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Web_Components\">Web Components<\/a> and frameworks like <a href=\"https:\/\/www.polymer-project.org\/\">polymer<\/a> and <a href=\"https:\/\/www.jitendrazaa.com\/blog\/tag\/lightning-component\/\">Lightning Components<\/a>. 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\u00a0<strong>Lightning Out.\u00a0<\/strong>With the help of Lightning Out, we can surface our existing Lightning Component to external websites. Previously, we already discussed that <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/use-lightning-component-in-visualforce-page\/\">how Lightning components can be used on Visualforce pages using Lightning Out<\/a>.<\/p>\n<p>Let&#8217;s see how we can do it.<!--more--><\/p>\n<p style=\"text-align: justify;\">You can find complete source code of this blog post in my Github <a href=\"https:\/\/github.com\/JitendraZaa\/Lightning-Out-Demo\">repository<\/a>.<\/p>\n<p style=\"text-align: justify;\"><strong>Step 1 :<\/strong> Consider below simple Lightning application, name its as\u00a0<strong>LightningOutDemo<\/strong><\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;aura:application access=&quot;Global&quot; extends=&quot;ltng:outApp&quot;&gt;\r\n    &lt;aura:dependency resource=&quot;forceChatter:feed&quot; type=&quot;COMPONENT&quot; \/&gt; \r\n&lt;\/aura:application&gt;\r\n<\/pre>\n<p>There are few things to note in above code.<\/p>\n<ul>\n<li style=\"text-align: justify;\"><strong>Global\u00a0<\/strong>access is defined at Lightning application informing that this application can be used globally in Salesforce instance<\/li>\n<li style=\"text-align: justify;\"><strong>ltng:outApp &#8211;\u00a0<\/strong>This component extends ltng:outApp indicating that this can be used outside Lightning framework, like in Visualforce page<\/li>\n<li style=\"text-align: justify;\"><strong>aura:dependency &#8211;\u00a0<\/strong>This tag indicates, which component can be used to show as part of Lightning Out.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">We are using standard Lightning component\u00a0<strong>forceChatter:feed<\/strong>, which will show a logged in user&#8217;s chatter feed.<\/p>\n<p style=\"text-align: justify;\">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 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Security\/Same-origin_policy\">Same-origin policy<\/a> and we can fix it by adding our Node.js application&#8217;s URL in\u00a0<strong>Salesforce CORS (Cross-Origin Resource Sharing)\u00a0<\/strong>setting.<\/p>\n<p><strong>Step 2 : Create X.509 Certificate using OpenSSL<\/strong><\/p>\n<p style=\"text-align: justify;\"><a href=\"https:\/\/www.openssl.org\/\">Download OpenSSL from here<\/a> and run below commands to create self signed certificate.<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nopenssl req -newkey rsa:2048 -new -nodes -keyout key.pem -out csr.pem\r\nopenssl x509 -req -days 365 -in csr.pem -signkey key.pem -out server.crt\r\n<\/pre>\n<p style=\"text-align: justify;\">Above command will create two files &#8211; server.crt and key.pem which needs to be used in Node.js application.<\/p>\n<p><strong>Step 3 : Create Node.js Application<\/strong><\/p>\n<p style=\"text-align: justify;\">I would be using almost same code as of my previous post where <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/dreamforce-2014-session-create-web-based-ide-for-salesforce\/\">we built Simple Salesforce IDE using Tooling API<\/a>. However there are three below major changes in Node.js application.<\/p>\n<p style=\"text-align: justify;\"><strong>a. Allow CORS in Node.js<\/strong><\/p>\n<p style=\"text-align: justify;\">Below method is added in Server.js file which enables Cross Origin Resource Sharing (CORS).<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/*Allow CORS*\/\r\napp.use(function(req, res, next) {\r\n\t \r\n\tres.setHeader('Access-Control-Allow-Origin', '*');\r\n\tres.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'); \r\n\tres.setHeader('Access-Control-Allow-Methods', '*');\r\n\tres.setHeader('Access-Control-Expose-Headers', 'X-Api-Version, X-Request-Id, X-Response-Time');\r\n\tres.setHeader('Access-Control-Max-Age', '1000');\r\n\t  \r\n\tnext();\r\n});\r\n<\/pre>\n<p style=\"text-align: justify;\"><strong>b. Use SSL (X.509) with Node.js<\/strong><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar options = {\r\n  key: fs.readFileSync('.\/key.pem', 'utf8'),\r\n  cert: fs.readFileSync('.\/server.crt', 'utf8')\r\n};\r\n   \r\nhttps.createServer(options, app).listen(8081);\r\n<\/pre>\n<p><strong>c. Include Lightning Out Javascript<\/strong><\/p>\n<p style=\"text-align: justify;\">To use Lightning component in our external application, we need to import Lightning out Javascript file, which can be found at<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nhttps:\/\/YOUR-DOMAIN.lightning.force.com\/lightning\/lightning.out.js\r\n<\/pre>\n<p>Don&#8217;t feel like you are lost in ocean from above steps \ud83d\ude09 , <a href=\"https:\/\/github.com\/JitendraZaa\/Lightning-Out-Demo\">complete source code can be found at my Github repository here<\/a>.<\/p>\n<p><strong>Step 4. Create Connected App in Salesforce<\/strong><\/p>\n<p style=\"text-align: justify;\">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, <a href=\"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/login-to-salesforce-from-salesforce-using-authentication-provider\/\">then please visit this URL for detailed information<\/a>. Make sure that callback URL in your connected app is <em>https:\/\/localhost:8081\/oauthcallback.html<\/em>. Once Connected app is created, copy <strong>consumer key<\/strong> and update <em>OAuth.js<\/em> file with this key.<\/p>\n<p><strong>Step 5. Enable CORS in Salesforce<\/strong><\/p>\n<p style=\"text-align: justify;\">This step is to add our Node.js application in\u00a0<strong>CORS<\/strong> setting of Salesforce. It allows, our Node.js application to use Salesforce resources like Javasript and CSS. So save <em>https:\/\/localhost:8081<\/em> in <strong>CORS\u00a0<\/strong>setting of Salesforce.<\/p>\n<p><strong>Step 6. Finally running Node.js application to use Lightning Component<\/strong><\/p>\n<p style=\"text-align: justify;\">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 <a href=\"https:\/\/github.com\/JitendraZaa\/Lightning-Out-Demo\">downloaded source code from github repository<\/a>, run below commands in downloaded directory.<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nnpm install\r\nnpm start\r\n<\/pre>\n<p style=\"text-align: justify;\">If everything works fine, you will see message on console saying <em>Server listening for HTTPS connections on port 8081<\/em>.<\/p>\n<p style=\"text-align: justify;\">Navigate to <em><span style=\"text-decoration: underline;\">https:\/\/localhost:8081\/<\/span><\/em> 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.<\/p>\n<figure id=\"attachment_5990\" aria-describedby=\"caption-attachment-5990\" style=\"width: 651px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Lightning-Component-in-Node.js-application.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-5990\" src=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Lightning-Component-in-Node.js-application.png?resize=651%2C576&#038;ssl=1\" alt=\"Lightning Component in Node.js application\" width=\"651\" height=\"576\" srcset=\"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Lightning-Component-in-Node.js-application.png?w=651&amp;ssl=1 651w, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Lightning-Component-in-Node.js-application.png?resize=300%2C265&amp;ssl=1 300w\" sizes=\"auto, (max-width: 651px) 100vw, 651px\" \/><\/a><figcaption id=\"caption-attachment-5990\" class=\"wp-caption-text\">Lightning Component in Node.js application<\/figcaption><\/figure>\n<p style=\"text-align: justify;\"><strong>Demo Video explaining code<\/strong><\/p>\n<p><iframe loading=\"lazy\" title=\"How to use Lightning Component in external website using Lightning Out\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/q9g7rP3OWRA?start=574&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>How to use Lightning component in node.js (External websites) by using Lightning Out. It shows how to enable CORS and SSL in Node.js with Video and complete source code.<\/p>\n","protected":false},"author":1,"featured_media":5988,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"jz_research_post":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[310,9],"tags":[396,394,397,311,391,267,260,392,188,395,393],"class_list":["post-5987","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lightning","category-salesforce","tag-cors","tag-cors-enabled-nodejs","tag-cross-origin-resource-sharing-cors","tag-lightning-component","tag-lightning-out","tag-nodejs","tag-oauth","tag-openssl","tag-ssl","tag-ssl-enabled-nodejs","tag-x-509-certificate"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/04\/Show-Lightning-Component-in-Node.js-using-Lightning-Out.png?fit=1162%2C637&ssl=1","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":6142,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/show-lightning-component-on-public-website-without-authentication\/","url_meta":{"origin":5987,"position":0},"title":"Show Lightning component on public website without authentication","author":"Jitendra","date":"June 5, 2017","format":false,"excerpt":"How to show Lightning component on public sites without need of user authentication","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4102,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/salesforce-faq-part-20-lightning-questions\/","url_meta":{"origin":5987,"position":1},"title":"Salesforce interview question related to Lightning framework &#8211; Part 20","author":"Jitendra","date":"February 4, 2015","format":false,"excerpt":"Salesforce interview questions for Salesforce developers and admin , mostly related to newly released Salesforce Lightning components and applications","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4646,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/compliation-of-resources-to-learn-lightning-components-in-salesforce\/","url_meta":{"origin":5987,"position":2},"title":"Compilation of resources to learn Lightning Components in Salesforce","author":"Jitendra","date":"July 8, 2015","format":false,"excerpt":"An attempt to gather all resources to learn Salesforce lightning component in one blog post","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":4461,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/getting-started-with-basics-of-lightning-component\/","url_meta":{"origin":5987,"position":3},"title":"Getting started with basics of Lightning Component","author":"Jitendra","date":"May 19, 2015","format":false,"excerpt":"As you might already know\u00a0that next big change in Salesforce is introduction to lightning components. As technology is changing rapidly and to take advantage of cutting edge innovations in web technology, Salesforce doesn't want to stay behind. If we see trend, all major platform has introduced component based design like\u2026","rel":"","context":"In &quot;Lightning&quot;","block_context":{"text":"Lightning","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/lightning\/"},"img":{"alt_text":"Getting started with Lightning component Output","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2015\/05\/Getting-started-with-Lightning-component-Output.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":6176,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/lookup-component-in-salesforce-lightning\/","url_meta":{"origin":5987,"position":4},"title":"Lookup component in Salesforce Lightning","author":"Jitendra","date":"July 6, 2017","format":false,"excerpt":"Salesforce Lightning component in plain JavaScript and SLDS with complete source code","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"Salesforce Lightning Lookup Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2017\/07\/Salesforce-Lightning-Lookup-Component.png?fit=978%2C285&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":6048,"url":"https:\/\/www.jitendrazaa.com\/blog\/salesforce\/15-ways-to-improve-performance-of-lightning-components-in-salesforce\/","url_meta":{"origin":5987,"position":5},"title":"15 ways to improve performance of Lightning Components in Salesforce","author":"Jitendra","date":"May 12, 2018","format":false,"excerpt":"Improve Lightning Component performance using simple 15 rules like Storable Actions, avoiding server trips, Lightning Data Service, Unidirectional data binding, creating component APIs etc","rel":"","context":"In &quot;Salesforce&quot;","block_context":{"text":"Salesforce","link":"https:\/\/www.jitendrazaa.com\/blog\/category\/salesforce\/"},"img":{"alt_text":"15 ways to improve Performance of Lightning Component","src":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-12-at-1.31.43-PM.png?fit=1200%2C307&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-12-at-1.31.43-PM.png?fit=1200%2C307&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-12-at-1.31.43-PM.png?fit=1200%2C307&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-12-at-1.31.43-PM.png?fit=1200%2C307&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/www.jitendrazaa.com\/blog\/wp-content\/uploads\/2018\/05\/Screen-Shot-2018-05-12-at-1.31.43-PM.png?fit=1200%2C307&ssl=1&resize=1050%2C600 3x"},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5987","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/comments?post=5987"}],"version-history":[{"count":5,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5987\/revisions"}],"predecessor-version":[{"id":5992,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/posts\/5987\/revisions\/5992"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media\/5988"}],"wp:attachment":[{"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/media?parent=5987"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/categories?post=5987"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jitendrazaa.com\/blog\/wp-json\/wp\/v2\/tags?post=5987"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}