Lightning Aura Components Developer Guide

What Is the Lightning Component Framework?
Quick Start
Creating Components
Component Names
Create Aura Components in the Developer Console
Create Aura Components Using the Salesforce CLI
Component Markup
Component Namespace
Component Bundles
Component IDs
HTML in Components
CSS in Components
Component Attributes
Using Expressions
Component Composition
Component Body
Component Facets
Controlling Access
Using Object-Oriented Development
Best Practices for Conditional Markup
Aura Component Versioning for Managed Packages
Base Components with Minimum API Version Requirements
Validations for Aura Component Code
Using Labels
Localization
Working with Base Lightning Components
Working with UI Components
Supporting Accessibility
Writing Documentation for the Component Library
Using Components
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

Create Aura Components Using the Salesforce CLI

To develop Aura components, use the Salesforce CLI to synchronize source code between your Salesforce orgs and version control system. Alternatively, you can use the Developer Console.
Your development environment includes:
  • Salesforce CLI
  • Visual Studio Code or another code editor
  • Salesforce Extension Pack, if using Visual Studio Code
  • A Developer Edition org

You must enable My Domain in your org. When My Domain isn’t deployed in your org, user interface controls related to Aura components may be hidden or inactive. See My Domain in Salesforce Help.

Note

To install the Salesforce CLI and verify the installation, follow the instructions at Salesforce DX Setup Guide.

If you had a prerelease version of the CLI installed, run this command to update it.

Note

Use your favorite code editor with the Salesforce CLI. We recommend using Visual Studio Code because its Salesforce Extension Pack provides powerful features for working with the Salesforce CLI, the Lightning Component framework, Apex, and Visualforce.

If you choose to work with Visual Studio Code, install it and the Salesforce Extension Pack.

To create and deploy an Aura Component to your org:

  1. Create a Salesforce DX project.
    1. In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
    2. Type SFDX and then select SFDX: Create Project.
    3. Enter HelloAuraComponent and then press Enter. Select a folder to store the project.
    4. Click Create Project. You should see something like this in your Visual Studio Code workspace.Workspace view for new project

      The default Salesforce DX project structure facilitates moving source to and from your orgs. See Create a Salesforce DX Project.

      Note

  2. Create an Aura component.
    1. Open the Command Palette and select SFDX: Create Lightning Component.
    2. Enter a name for your component, such as myComponent. Press Enter.
    3. Enter the directory for your component or press Enter to accept the default. The default directory is force-app/main/default/aura. You should see a similar directory like this.Directory example for Aura component
    4. Open myComponent.cmp and replace its content.
  3. Authenticate to your org. This step uses a Dev Hub org.

    You can develop Aura components in scratch orgs and non-scratch orgs. A Dev Hub org enables you to create scratch orgs. Configure an org as a Dev Hub by following the instructions at Salesforce DX Setup Guide.

    Note

    1. Open the Command Palette and select SFDX: Authorize a Dev Hub Org. A browser window opens with a Salesforce login page.
    2. Log in to your org. If prompted to allow access, click Allow.

      After you authenticate in the browser, the CLI remembers your credentials. The success message looks like this.

      If the authentication fails, follow the troubleshooting guide at Salesforce DX Setup Guide.

  4. Deploy your files.
    1. In the Visual Studio Code terminal, run this command.
      The success message looks like this.
If you make changes to your component via the Developer Console in the Dev Hub org, use the force:source:retrieve command to retrieve your changes. The source you retrieve overwrites the corresponding source files in your local project.