Extending Salesforce Lightning Components Beyond the Cloud with Lightning Out

Salesforce Lightning Web Components (LWC) are not just confined to the Salesforce ecosystem. With Lightning Out, you can extend the power of Salesforce and run your components on any platform, be it a Node.js app on Heroku or an internal server within your organization’s firewall. This comprehensive guide will walk you through the process of using Lightning Out to deploy your components outside of Salesforce servers, ensuring a seamless integration with your existing systems.

Lightning Out: A Gateway to Universal Component Deployment

What is Lightning Out?

Lightning Out is a feature currently in Beta that allows you to create standalone Aura apps, known as Lightning Out apps. These apps can host your LWCs and can be executed outside of Salesforce’s domain.

Key Considerations:

Beta Service: Lightning Out is a Beta Service, and its use is subject to Salesforce’s Beta Services Terms.
Development Parity: The development process for LWCs intended for Lightning Out is similar to that within Salesforce.

Setting Up Your Lightning Out App

To get started with Lightning Out, you need to include the Lightning Out JavaScript library on your origin server’s page. This setup enables a secure connection between Salesforce and your server, allowing your components to function as intended.

Requirements for Deployment:

Remote Web Container: Must support HTML and JavaScript modifications and acquire a valid Salesforce session ID.
Lightning Locker: Use Lightning Locker for security, as Lightning Out is not compatible with Lightning Web Security.
Salesforce Org Configuration: Create a Connected App and add your server to the CORS allowlist.
Browser Cookie Management: Set up a custom domain or adjust browser settings to handle third-party cookies.

Creating and Managing Lightning Out Apps

A Lightning Out app is an Aura app that lists all the LWCs you wish to deploy externally. It’s crucial to set the access control to GLOBAL and extend the app from ltng:outApp or ltng:outAppUnstyled.

Styling Your App:

Default Styling: Lightning Out includes Salesforce Lightning Design System styling by default.
Custom Styling: For full control over styles, extend your app from ltng:outAppUnstyled.

Implementing Lightning Out Markup

To integrate Lightning Out with your external app, you must first add the Lightning Out JavaScript library to your page. Then, use the $Lightning.use() function to load your app and insert your LWCs into the page using $Lightning.createComponent().

Markup Example:

HTML

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
    <h1>My External Page</h1>
    <div id="lightning-out"></div>
    <script src="https://MY_DOMAIN_NAME.my.salesforce.com/lightning/lightning.out.js"></script>
    <script>
        $Lightning.use(
            'c:MyLightningOutApp', // Lightning Out app name
            function () { // Callback after framework and app load
                $Lightning.createComponent(
                    'c:MyCustomComponent', // LWC name
                    {}, // Component attributes
                    'lightning-out', // DOM element ID for component insertion
                    function (cmp) { // Callback after component loads
                        console.log('The component was created.');
                    }
                );
            },
            'https://MY_DOMAIN_NAME.my.salesforce.com' // Salesforce instance URL
        );
    </script>
</body>
</html>

Conclusion

By following this guide, you can effectively deploy your Salesforce LWCs anywhere, leveraging the full potential of Lightning Out. Ensure that you adhere to the best practices and requirements outlined here to guarantee a successful integration with your external applications.

Venkat Sumanth Guduru Written By

Blog Details