Lightning Aura Components Developer Guide

What Is the Lightning Component Framework?
Quick Start
Creating Components
Using Components
Aura Component Bundle Design Resources
Use Aura Components in Lightning Experience and the Salesforce Mobile App
Navigate Across Your Apps with Page References
Get Your Aura Components Ready to Use on Lightning Pages
Use Aura Components in Experience Builder
Use Aura Components with Flows
Add Components to Apps
Integrate Your Custom Apps into the Chatter Publisher
Using Background Utility Items
Use Lightning Components in Visualforce Pages
Add Aura Components to Any App with Lightning Out (Beta)
Lightning Container
Using a Third-Party Framework
Lightning Container Component Limits
The Lightning Realty App
Install the Example Lightning Realty App
lightning-container NPM Module Reference
Communicating with Events
Communicating Across the DOM with Lightning Message Service (Beta)
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components with Lightning Testing Service
Debugging
Performance
Reference
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Install the Example Lightning Realty App

See further examples of lightning:container in the Developerforce Git repository.

Implement a more in-depth example of lightning:container with the code included in https://github.com/developerforce/LightningContainerExamples. This example uses React and lightning:container to show a real estate listing app in a Lightning page.

To implement this example, use npm. The easiest way to install npm is by installing node.js. Once you’ve installed npm, install the latest version by running npm install --save latest-version from the command line.

To create custom Lightning components, you also need to have enabled My Domain in your org. For more information on My Domain, see My Domain in the Salesforce Help.

  1. Clone the Git repository. From the command line, enter git clone https://github.com/developerforce/LightningContainerExamples
  2. From the command line, navigate to LightningContainerExamples/ReactJS/Javascript/Realty and build the project’s dependencies by entering npm install.
  3. From the command line, build the app by entering npm run build.
  4. Edit package.json and add your Salesforce login credentials where indicated.
  5. From the command line, enter npm run deploy.
  6. Log in to Salesforce and activate the new Realty Lightning page in the Lightning App Builder by adding it to a Lightning app.
  7. To upload sample data to your org, enter npm run load from the command line.
See the Lightning realty app in action in your org. The app uses lightning:container to embed a React app in a Lightning page, displaying sample real estate listing data.The Lightning realty app, implemented using lightning:container.

The component and handler code are similar to the examples in Sending Messages from the Lightning Container Component and Handling Errors in Your Container.