Before setting LWC on your computer you must have following things:

  • You must have salesforce developer account
  • You must enable custom domain from setup > my domain
  • You must enable Dev Hub from setup > dev hub (see below pic)
  • Also to run VS code you must have JDK, JRE (if not, download and install it first)
Now we will start to set LWC. Follow the below points:
  1. Download and install Visual Studio Code here.
  2. After successful install, go to Extension menu on left side as show below & download Salesforce Extension Pack &  Lightning Web Component

  3. Now download & install Salesforce CLI here. (Download as per your system configuration support). Select the option "Add path of Salesforce CLI" otherwise you have to set the path manually from My computer properties > advances system settings > Environmental Variables > Path, edit it and give your Salesforce cli bin installation folder path. Like C:\Program Files (x86)\Salesforce CLI\bin 
  4. Now open Visual Studio(VS) code, from the setting icon (below left) or Ctrl+Shift+P open palette & create SFDX Project with manifest. Just type in palette SFDX: Create Project with Manifest
  5. Now you have to Authorize a Dev hub. For this again open palette and type SFDX: Authorize a Dev Hub. After this it will redirect to salesforce org where it will ask to allow the hub. Simple click on "Allow"
  6. Now create a Default scratch org. Open palette and type SFDX: Create a Default Scratch Org (After successful creation it will show the notification below right)
  7. Yeyy, now you will create a Lightning Web Component. Again open palette and type SFDX: Create Lightning Web Component. It will ask to give filename just type name of file whatever you want. Here we are making hello world program so in below you will see "helloWorld" file name. After that choose the directory force-app\main\default\lwc


  8. Here below in pic you will see that after creating LWC three files will be created helloWorld.html, helloWorld.js & helloWorld.js-meta.xml. HTML file is for front-end, JS file is for controller and for actions & XML file for setting the path.
    Copy the below code and paste accordingly.
  9. Now save all the files. We will push the code to Default Scracth Org. For this open palette and type SFDX: Push Source to Default Scratch Org
  10. At last we will open Default Org to see our helloWorld component. Just type in palette SFDX: Open Default Org. (Note: This component will only be visible in Default Org, don't get confuse that it is not showing in your own org where you were working before)
  • Below is the output of "helloWorld" component. As we have mention in xml i.e it will only visible in Lightning App page. So create one App page and place helloWorld component there.