Sunday, September 8, 2019

What is LWC(Lightning Web Components)? How to set up visual studio code for Salesforce?

As of now we have built lightning component using the "Aura Components model" we can also built
lightning component using the "Lightning Web Components model". Lightning Web Components are custom HTML elements build using the HTML Elements and modern Javascript. We can built components using any of the model and can place these components on the same lightning page.

For developing LWC we require  "Salesforce Extensions for Visual Studio Code" and for deploying LWC from an org we require "Salesforce CLI".

Aura Components make use of own custom component model, custom templates,custom components etc while LWC is built on web standards and it make use of web components,templates,custom elements which we have in web standards. Both Aura component,LWC make use of Security,LDS and Base lightning components.

Important points to note:

1) Aura component and LWC can exist on Same lightning page.
2) Aura component can include LWC

Setting up the Salesforce DX Environment:

1) Download Visual code studio from

2) After downloading open the Visual code studio you will see something like these.

Lightning Web Components

3) Click on the symbol shown in the below image.

Lightning Web Components

4) Type "Salesforce extension pack" in search box and click install as shown in below image.

how to set up visual studio code for salesforce

5) Now open google chrome and search for "install Salesforce cli" and open the link as shown in below image.

Lightning Web Components

6) Click download in the below image.

Salesforce CLI

7) To check if it is downloaded properly open Command Prompt and type sfdx and press enter.

Lightning Web Components

8) Now to install the latest plugin type "sfdx plugins:install salesforcedx@latest" and wait till the installation is completed.

9) Now we need to set the path and environment variable on our desktop.

Go to This PC > Right click on This PC > Properties > Advanced system settings > Environment variables > Double click on Path and check if the Path has the "C:\Program Files\Salesforce CLI\bin". Also the under the System variable check if the Path has "C:\Program Files\Salesforce CLI\bin". If this is missing under Path in "User variables for home" or "System variables" section create the same using the new button.

Lightning Web Components

10) Now to check if everything is setup properly go to Visual Studio and Press CTRL+SHIFT+P.
Enter SFDX: Create Project with Manifest > Enter the project name > Select the folder. It will create a Project for us after running as shown below.

If you get this error: Error: Salesforce CLI is not installed.

Just close the visual code studio and start again.


Now, we will see how to Authorize a dev hub?

11) Press CTRL+SHIFT+P,

Type sfdx:Authorize a Dev Hub as shown in below image and click it, It will take you to the login page.

12) Login to your Salesforce org and now check Visual Code studio. It will show us the success message as shown below.

how to use visual studio code for salesforce

13) Now the next step is to create a Scratch org.

Scratch org is disposable Salesforce org used for development and testing.

Now press CTRL+SHIFT+P and search for "Create a Default Scratch org.." and click it and select the file available as shown in the below images.

visual studio code salesforce setup

how to use visual studio code for salesforce

14) Specify the name and the days after which the Scratch org will expire. Now we can see that the Scratch org is getting created as shown in below image.

how to use visual studio code for salesforce

15) After the Scratch org is created successfully press CTRL+SHIFT+P  and type "SFDX:Open Default Org ". It will open the Scratch org in new console as shown below.

Scratch org in Salesforce using Visual Code Studio

No comments:

Post a Comment