Develop in Scratch Orgs

You can develop Lightning web components in scratch orgs. Scratch orgs are short-term Salesforce environments that you can spin up to work on a feature. Pushing to a scratch org includes only files that have changed.

Before you create a component for a scratch org, see Set Up an Editor, Linter, and Org and Install the Salesforce CLI.

Note

Create a Salesforce DX Project

A Salesforce DX project has a specific structure and a configuration file that identifies the directory as a Salesforce DX project.

In VS Code, press Command + Shift P, enter sfdx, and select SFDX: Create Project.

You can also run this command from the command line.

1cd PATH/TO/YOUR/SFDX/PROJECTS
2sf project generate --name MyLWC
3cd MyLWC

Install, Configure, and Run Linting

ESLint is a program that runs in the background and looks for problems as you code. It analyzes your code against a set of rules. These linting rules can include best practices, guard rails, and errors. You can configure the linting rules for your project. If code breaks a rule, a squiggly line appears below the code. Mouse over the code to see the rule and a suggested fix.

To install the ESLint rules for Lightning Web Components, run this command in your Salesforce DX project directory.
1npm install
If you have issues, verify that the project’s package.json file matches the salesforcedx-templates package.json file. For example, the .eslintignore file is no longer needed and has been superseded by the "lint": "eslint **/{aura,lwc}/**/*.js" script in package.json. The script runs linting only for the JS files under the lwc and aura folders.
There are three configuration levels for linting. Check out the eslint-config-lwc README and choose the configuration that matches your coding needs. In your project, set the configuration level in the /force-app/main/default/lwc/.eslintrc.json file.

If your project doesn’t have the file, copy it from salesforcedx-templates and paste it in the /force-app/main/default/lwc folder.
To run linting, you must have at least one Lightning web component in your project.
1npm run lint

Lightning Web Security provides additional ESLint rules. For more information, see Install ESLint Rules for Lightning Web Security.

Note

Enable Dev Hub in Your Org

A dev hub is the main Salesforce org that you and your team use to create and manage your scratch orgs.

From Setup, enter Dev Hub in the Quick Find box and select Dev Hub.

If you don’t see Dev Hub in the Setup menu, make sure that your org is one of the supported editions.
To enable Dev Hub, click Enable. After you enable Dev Hub, you can’t disable it.

For more information, see Salesforce DX Setup Guide: Enable Dev Hub in Your Org.

Authorize Your Dev Hub

Before you can create a scratch org, authorize your Dev Hub org. Running this command opens a browser to the Salesforce login page. Enter your Dev Hub username and password. Authorize only once, not every time you work on your project.

In VS Code, press Command + Shift P, enter sfdx, and select SFDX: Authorize a Dev Hub.

You can also run this command from the command line.

1sf org login web -d -a LWC-Hub

“LWC-Hub” is an alias for the Dev Hub org that you can use in other Salesforce CLI commands. You can create any alias that you like.

Create a Default Scratch Org

In VS Code, press Command + Shift P, enter sfdx, and select SFDX: Create a Default Scratch Org.

You can also run this command from the command line.

1sf org create scratch -s -f config/project-scratch-def.json -a "LWC"

“LWC” is an alias for the scratch org that you can use in other Salesforce CLI commands. You can create any alias that you like.

To create a scratch org, specify a scratch org definition file. This example uses the default scratch org definition file, project-scratch-def.json.

Beginning in Winter ’23, Lightning Web Security is enabled by default in new orgs, including scratch orgs. For more information see Enable and Disable LWS in Scratch Orgs

Tip

Create a Lightning Web Component

Create Lightning web components in the force-app/main/default/lwc folder.

In VS Code, press Command + Shift P, enter sfdx, and select SFDX: Create Lightning Web Component.

You can also run this command from the command line.

1sf lightning generate component --type lwc -n myComponent -d force-app/main/default/lwc

Push Source to the Scratch Org

You’re ready to push new source code, including Lightning web components, to your scratch org for testing. Remember to save your code before you push.

When you push source code to a scratch org, only files that have changed are pushed.

In VS Code, press Command + Shift P, enter sfdx, and select SFDX: Push Source to Default Scratch Org.

You can also run this command from the command line.

1sf project deploy start

Pull Source from the Scratch Org

You can also run this command from the command line.

1sf project retrieve start

Open the Scratch Org

In VS Code, press Command + Shift P, enter sfdx, and select SFDX: Open Default Scratch Org.

You can also run this command from the command line.

1sf org open

Lather, Rinse, Repeat

To see changes in Salesforce, push source code to your org and hard refresh the browser.

See Also