Building an LWC is the same workflow as Lightning Web Component development: scaffold the bundle through DX, write the four files, deploy through the CLI, surface in App Builder.
- Install the Salesforce CLI
Install the sf CLI from developer.salesforce.com. Confirm with sf --version. The CLI is the entry point for all DX-driven LWC development.
- Scaffold a DX project
Run sf project generate --name MyProject. The CLI creates the DX folder structure with force-app/main/default/lwc as the LWC home.
- Generate the LWC bundle
Run sf lightning generate component --type lwc --name myComponent. The CLI creates the four-file bundle in the lwc folder.
- Write the HTML, JS, CSS
Edit myComponent.html for the template, myComponent.js for the class, myComponent.css for scoped styles. Configure myComponent.js-meta.xml to expose the component.
- Deploy to the target org
Run sf project deploy start --source-dir force-app/main/default/lwc/myComponent. The CLI compiles and deploys.
- Drop the component on a Lightning page
Setup, Lightning App Builder, edit a record page, drag the component from the Custom palette, save, activate.
- Verify in the browser
Open a record using the page, confirm the component renders with the right state, test interactions and reactivity.
Four-file folder structure: HTML template, JS class, meta XML, CSS styles. The unit of LWC development.
Public property or method, settable from parent components or callable from outside.
Reactive data binding to Apex methods, record loads, or other wire-capable services.
The contexts where the LWC can run: record page, app page, Experience Cloud, Flow screen, Quick Action.
The framework-level cache for record CRUD operations used by wire adapters and imperative calls.
Component CSS isolation that prevents style leakage across component boundaries.
- @api properties are public. Renaming an @api property is a breaking change for every parent that consumes it. Treat @api as a contract.
- Wire adapters do not call .catch like a Promise. Errors arrive as the error property of the wire result. Forgetting this leads to silently swallowed exceptions.
- Native shadow blocks global CSS, including SLDS overrides. If design system tokens are not appearing, check whether the component is running native shadow.
- LWCs cannot embed Aura components. Aura can embed LWC. Plan the component hierarchy with the one-way embed in mind.
- The meta XML isExposed and target settings determine where the LWC can be placed. Missing or wrong settings hide the component from App Builder silently.