Create a Salesforce DX Project via Command Palette
- In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
- Type
SFDX
. - Select SFDX: Create Project.
- Enter
HelloWorldLightningWebComponent
as the project name. - Press Enter.
- Select a folder to store the project.
- Click Create Project. You should see something like this as your base setup.
Create a Salesforce DX Project via Salesforce CLI
- Open integrated terminal in Your Visual Studio Code
- Type sfdx force:project:create –projectname <anyname> and press Enter. You will as below
- The folder has been created but you need to open it in Your Visual Studio Code by clicking on Open folder shown below.
- It will open the prompt window to select the folder. Select it and click on open. It will open the folder and relaunch your visual studio code. You will something as shown below.
Authorize Your Non – DevHub Org Via Command Palette
- In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
- Type
SFDX
. - Select SFDX: Authorize an Org.
- Select the login option accordingly. Select login.salesforce.com to login into your developer Org or select test.salesforce.com to login into the sandbox. You can use a custom domain URL to log in too.
- Log in using your Org.
- If prompted to allow access, click Allow.
- After you authenticate in the browser, the CLI remembers your credentials. The success message should look like this:
Authorize Your Non – DevHub Org Via Salesforce CLI
- Open integrated terminal in Your Visual Studio Code
- Type sfdx force:auth:web:login –setalias <anyname> and press Enter. You will as below
Check Your Authorized Org Info Via Salesforce CLI
- Open integrated terminal in Your Visual Studio Code
- Type sfdx force:org:list and press Enter. You will as below
Note:- You can not enable DevHub in an org having namespace enabled.
Create a Lightning Web Component via Command Palette
- In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.
- Type
SFDX
. - Select SFDX: Create Lightning Web Component.
- Press Enter to accept the default
force-app/main/default/lwc
. - Enter your desired name as the name of the new component.
- Press Enter.
- View the newly created files in Visual Studio Code.
Create a Lightning Web Component via Salesforce CLI
To create a Lightning web component from the CLI, you must have an lwc directory in your Salesforce DX project.
- In <app dir>/main/default, create the lwc directory.
- Change to the lwc directory.
- In the lwc directory, create the Lightning web component.view source
- Use sfdx force:lightning:component:create –type lwc -n yourComponentName
If you don’t follow the above steps, You will get below error:
If you have completed the above steps to change the directory, You will see as below