Learn How to Use Salesforce Lightning Out

Hello! It’s Atlas here with another post. I’m a Salesforce Developer at EMPAUA and a moderator at SFXD and as a self-taught-admin-turned-developer, my mission is to share what I have learned over the years from my own experience and from some of the best people in the ecosystem. You can find my previous interviews and articles at SalesforceBen here. You can also find me on LinkedIn and Twitter.

It’s no secret that Lightning Out has been out for a while and has been used to build apps that have the same look and feel as Salesforce by using components directly (instead of styling them only) while also hosting them outside of Salesforce. While you can use Aura or Visualforce components, I haven’t seen a lot of tutorials utilizing Lightning Web Components, so I decided to make one. 

‍

In this video, we’re doing a public opt-out page hosted outside of Salesforce (GitHub Pages) to update or create records in Salesforce. The video is in more detail, but here are the steps:

1. Enable Digital Experiences in your org (Communities)
2. Create your Lightning Web Component app/page and host it inside Salesforce and test it first (tab, button etc.)
3. Create a Blank Community Site (not a page)
4. Create your Aura Dependency App/Wrapper with correct attributes
5. Make sure you add your newly created Lightning Web Component as an aura dependency resource
6. Create the HTML file you will host outside of Salesforce, use the correct parameters for JS functions, use the community URL for the lightning out JS library.
7. Create a GitHub Page or anywhere you can host the html file
8. Add the created page to the CORS settings in Salesforce
9. Use debug logs on the guest user for our use case so you can test and debug the application
10. Deploy the Salesforce dependencies using Blue Canvas!
    

Remember to subscribe to Blue Canvas channel on YouTube and follow us on Twitter if you would like more tutorials and videos like this. Your feedback is also always welcome. I hope you enjoy the video!