Develop in Non-Scratch Orgs

You can deploy Lightning web components source code to non-scratch orgs. In these orgs, metadata changes aren’t tracked, so you deploy all the specified metadata instead of only what’s changed. You can also retrieve code from these orgs.

Before you create a component, 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

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

Deploy Source to an Org

You’re ready to deploy new source code, including Lightning web components, to your org for testing. Save your code first!

When you deploy source code to an org, the entire path that you specify is deployed.

Run this command from the command line.

1sf project deploy start -d <PATHTODEPLOY> -o <ORGUSERNAME>

This example deploys the root directory of a Salesforce DX project to an org with the username example@force.com.

1sf project deploy start -d force-app -o example@force.com

Retrieve Source from an Org

Run this command from the command line.

1sf project retrieve start -d <PATHTORETRIEVE> -o <ORGUSERNAME>

Lather, Rinse, Repeat

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

See Also