how to setup visual studio code and salesforce dx

Hi All :). Welcome again and in this post, we are going to learn how to setup Visual Studio and Salesforce DX.

Step 1: – Download VS Code

You can download VS Code from below link and install in your pc :- https://code.visualstudio.com/Download

Step 2: – Download Salesforce CLI

Download the Salesforce CLI and install into your machine. Download for the appropriate Operating system.

Operating System 
Link to Installer 
macOS 
https://sfdc.co/sfdx_cli_osx 
Windows 32-bit 
https://sfdc.co/sfdx_cli_win 
Windows 64-bit 
https://sfdc.co/sfdx_cli_win64 
Debian/Ubuntu 64 
https://sfdc.co/sfdx_cli_linux 
Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script. 
Debian/Ubuntu x86 
https://sfdc.co/sfdx_cli_linux_x86 
Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script. 

Step 3: – Download “Salesforce Extensions pack”

After you have installed the Visual Studio Code in your machine. Go to below link and install the extension.
If it asks to open with VS code then click “Open with Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode

Step 4: – Install “Lightning Web Component” Extension

After you have done all the above steps, click on below link and install the extension. If it ask to open with VS code then click “Open with Visual Studio Code”

https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode-lwc

Step 5:- Install the latest salesforce dx

Open the command prompt and then run the below command. sfdx plugins:install salesforcedx@latest

Once you have successfully installed the latest version of Salesforce run the below command to update the CLI sfdx update

Once you have done all above steps and you are getting the output in your command like above image that means you have done each and every installation in a correct way. Next step is to start working with Salesforce DX and Lightning Web Components.

Create SFDX Project

Open Visual Studio, go to Command Palette (Use combination of ctlr + Shift + P) and type sfdx: create project with manifest”. It will ask for project name give the and then select the location where you wanted to save your project. After project creation vs code will re start with the project files. And Check if the force-app contains a folder named “lwc

Authorize with Dev Hub Org

Next step is to authorize a dev hub org and associate to the project.

Open the Command palette and then find “sfdx: authorize a Dev Hub” and then select the command.

Enable Dev Hub

Login into your DevHub Org and navigate to Setup -> Dev Hub -> Enable Dev Hub.

Create Default Scratch Org

After you enabled the dev hub org in your org, next step is to create the default scratch org. Go to command palette in visual studio code and find “sfdx: create a default Scratch Org…“. Select the command.

  • Select Configuration file which automatically suggested by vs code
  • give the alias name for the org
  • give the no of days that you wanted to use scratch org. Maximum value is 30 Days.

above command will create a default scratch org associated with your Dev Hub Org.

Create a Lightning Web Component

Go to command palette and find “sfdx: Create Lightning Web Component” and select the same.

Push the code to Scratch Org

Open Command Palette and run “sfdx:push source to default scratch org

Verify changes

Open Command Palette and run “sfdx:open default orgs“.

Sources & References

Leave a Reply

Your email address will not be published. Required fields are marked *