Lightning Out Dependencies
Create a special standalone Aura dependency app to describe the components to be deployed using Lightning Out.
A standalone Aura dependency app is simply an
<aura:application> with a few attributes, and the dependent components described using the
<aura:dependency> tag. A standalone Aura dependency app isn’t one you’d ever actually deploy as an app for people to use directly. A standalone Aura dependency app is used only to specify the dependencies for Lightning Out.
This standalone Aura dependency app uses the
myAppComponent Lightning web component in the default
To reference a Lightning web component in an Aura app or an Aura component, use the naming convention
A standalone Aura dependency app must do the following.
- Set access control to
- Extend from either
- List as a dependency every component that is referenced in a call to
In this example,
<c:myAppComponent> is the top-level Lightning web component you are planning to create on the origin server using
$Lightning.createComponent(). Create a dependency for each component you add to the page with
Don’t worry about components used within the top-level component. The framework handles dependency resolution for child components.
A standalone Aura dependency app isn’t a normal Aura app, and you shouldn’t treat it like one. Use it only to specify the dependencies for your Lightning Out app.
In particular, note the following.
- You can’t add a template to a standalone Aura dependency app.
- Content you add to the body of the standalone Aura dependency app won’t render.
You have two options for styling your Lightning Out apps: Salesforce Lightning Design System and unstyled. Lightning Design System styling is the default, and Lightning Out automatically includes the current version of the Lightning Design System onto the page that’s using Lightning Out. To omit Lightning Design System resources and take full control of your styles, perhaps to match the styling of the origin server, set your dependency app to extend from
ltng:outAppUnstyled instead of
- Salesforce Help: Create a Connected App
- Salesforce Help: Use CORS to Access Salesforce Resources from Web Browsers
- Lightning Aura Components Developer Guide: aura
- Style Components with Lightning Design System