Building an Aura component starts in the Developer Console or a Salesforce DX project. The bundle includes the component markup, a JavaScript controller, optional helper functions, and the design and meta XML files that surface the component in App Builder.
- Create the Aura bundle
In the Developer Console, File, New, Lightning Component. Give it a name and the IDE scaffolds the bundle. From the Salesforce CLI: sf lightning generate component --type aura --name myComponent.
- Open the component markup
Edit myComponent.cmp. Declare attributes at the top with <aura:attribute>. Add the implements clause to expose the component to App Builder: implements="flexipage:availableForAllPageTypes,force:hasRecordId".
- Write the controller and helper
Open myComponentController.js. Each function is wired to a markup event handler. Helpers go in myComponentHelper.js and are called from the controller via helper.functionName(component).
- Call Apex from the controller
Apex methods marked @AuraEnabled are callable from the controller. Use component.get("c.methodName"), set parameters with action.setParams, set a callback with action.setCallback, and add to the queue with $A.enqueueAction.
- Add the component to App Builder
Open Setup, Lightning App Builder, drag the component onto a record page from the Custom palette. Save and activate. The implements clause from step 2 is what makes the component show up.
XML attribute that declares which interfaces the Aura component supports. flexipage:availableForAllPageTypes is the most common, exposing the component to App Builder.
Supported types include String, Integer, Boolean, Id, List, Map, Object, sObject, and Date. Type checking is enforced at runtime.
XML file that declares App Builder properties. Without a design file, the component cannot expose configurable properties to admins.
XML element <aura:registerEvent> declares which custom events a component can fire. <aura:handler> declares which events the component listens to.
Org-level setting that controls which JavaScript sandbox the Aura component runs in. Locker is the legacy default. LWS is the modern replacement.
- Aura is the older framework. Build new components in LWC by default and only fall back to Aura when you specifically need an Aura-only feature.
- Component events and application events have different bubbling rules. An application event fires globally, which is useful for cross-component messaging but easy to abuse as global state.
- Aura controllers cannot directly call Apex with a Promise. The $A.enqueueAction queue is callback-based. Wrap it in a Promise helper if you want async/await ergonomics.
- Aura and LWC styles do not always share scope cleanly. SLDS overrides written in an Aura wrapper component may not reach into an embedded LWC running in native shadow.
- Locker Service is on a deprecation glide path. Test critical Aura components in a sandbox with Lightning Web Security enabled to catch incompatibilities early.