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 c
namespace.
To reference a Lightning web component in an Aura app or an Aura component, use the naming convention <namespace:camelCaseComponentName>
.
A standalone Aura dependency app must do the following.
- Set access control to
GLOBAL
. - Extend from either
ltng:outApp
orltng:outAppUnstyled
. - List as a dependency every component that is referenced in a call to
$Lightning.createComponent()
.
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 $Lightning.createComponent()
.
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 ltng:outApp
.
See Also
- 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