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.

1sfdx plugins:install salesforcedx@latest

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.

Visual Studio Code (VS Code)
Salesforce Extension Pack for Visual Studio Code

To create and deploy an Aura Component to your org:

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.
  
  The default Salesforce DX project structure facilitates moving source to and from your orgs. See Create a Salesforce DX Project.
  Note
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.
4. Open myComponent.cmp and replace its content.
  1<aura:component> 2 Hello World! 3</aura:component>
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.
  115:53:54.247 sfdx force:auth:web:login --setdefaultdevhubusername 2Successfully authorized username@my.org with org ID 00D1a0000000000000 3You may now close the browser 415:55:22.961 sfdx force:auth:web:login --setdefaultdevhubusername ended with exit code 0
  If the authentication fails, follow the troubleshooting guide at Salesforce DX Setup Guide.

Deploy your files.

In the Visual Studio Code terminal, run this command.

1sfdx force:source:deploy -p force-app -u username@my.org

The success message looks like this.

1=== Deployed Source
2FULL NAME                             TYPE                  PROJECT PATH
3────────────────────────────────────  ────────────────────  ────────────────────────────────────────────────────────────────
4myComponent/myComponent.auradoc       AuraDefinitionBundle  force-app/main/default/aura/myComponent/myComponent.auradoc
5myComponent/myComponent.cmp           AuraDefinitionBundle  force-app/main/default/aura/myComponent/myComponent.cmp
6myComponent/myComponent.cmp           AuraDefinitionBundle  force-app/main/default/aura/myComponent/myComponent.cmp-meta.xml
7myComponent/myComponent.css           AuraDefinitionBundle  force-app/main/default/aura/myComponent/myComponent.css
8myComponent/myComponent.design        AuraDefinitionBundle  force-app/main/default/aura/myComponent/myComponent.design
9myComponent/myComponent.svg           AuraDefinitionBundle  force-app/main/default/aura/myComponent/myComponent.svg
10myComponent/myComponentController.js  AuraDefinitionBundle  force-app/main/default/aura/myComponent/myComponentController.js
11myComponent/myComponentHelper.js      AuraDefinitionBundle  force-app/main/default/aura/myComponent/myComponentHelper.js
12myComponent/myComponentRenderer.js    AuraDefinitionBundle  force-app/main/default/aura/myComponent/myComponentRenderer.js

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.

1sfdx force:source:retrieve -p force-app -u username@my.org

Lightning Aura Components Developer Guide

Create Aura Components Using the Salesforce CLI

See Also