When a Lightning components app is initialized using Lightning Out, Lightning Out loads the definitions for the components in the app. To do this efficiently, Lightning Out requires you to specify the component dependencies in advance, so that the definitions can be loaded once, at startup time.
The mechanism for specifying dependencies is a Lightning dependency app. A dependency app is simply an <aura:application> with a few attributes, and the dependent components described using the <aura:dependency> tag. A Lightning dependency app isn’t one you’d ever actually deploy as an app for people to use directly. A Lightning dependency app is used only to specify the dependencies for Lightning Out. (Or for Lightning Components for Visualforce, which uses Lightning Out under the covers.)
<aura:application access="GLOBAL" extends="ltng:outApp"> <aura:dependency resource="c:myAppComponent"/> </aura:application>
In this example, <c:myAppComponent> is the top-level component for the Lightning components app you are planning to create on the origin server using $Lightning.createComponent(). Create a dependency for each different component you add to the page with $Lightning.createComponent().
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.
A Lightning dependency app isn’t a normal Lightning app, and you shouldn’t treat it like one. Use it only to specify the dependencies for your Lightning Out app.