Create LWC Component In 4 Simple Steps
Tags: salesforce, lwc, vscode, javascript
Published: 2021-10-23 14:37:19

## Create LWC Component :
Unlike Aura you can't create LWC component from Developer console. So you need a IDE for this and VsCode is the best choice as it is free and fast.

### Step 1:

-    Open  **Visual Studio Code**.
 -    Press  **Command + Shift + P**  on macOS or  **Ctrl + Shift + P**  on Windows or Linux, then type  **create project**. Select  **SFDX: Create Project with manifest **, and press  **Enter**.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wk0uubgrpw3n6s49qyxq.png)
- **Then Select standard project :**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hm82ktvvc06d5pvaynjb.png)
- **Then enter your prefered name for project or leave blank and hit Enter.**

### **Step 2 :** 
#### Authorize Org:
- In  **Visual Studio Code**, press  **Command + Shift + P**  on macOS or  **Ctrl + Shift + P**  on Windows or Linux and type **SFDX: Authorize a Dev Hub**.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckomfde0xfdrtxorh3wa.png)

- Select your Org type and VsCode will open tab in browser and you have to login in your org using your org credentials.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8t4anir7vxwwmyeh1pkw.png)
- Click allow after login:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxsmxf8fra7xeyg48ssu.png)
- After you authenticate in the browser, the CLI remembers your Org credentials. The success message should look like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdmcx65wpg6exvxhh7oo.jpg)

### **Step 3 :** 
#### Create LWC Component:
- By Using Command Pallete :
   1.  In Visual Studio Code, press  **Command + Shift + P**  on macOS or  **Ctrl + Shift + P**  on Windows or Linux.
	2.  Type  **sfdx **  and select  **Create Lightning Web Component** and enter the name you want to give to your lightning web component and hit Enter twice.
	![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzuopcikdrdlsks3bsuq.png)
  3. This will creates the needed files for your first Lightning web component.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u4e5648j4c856wozr5z0.png)

- By Using Command in terminal:
  1.  In **Visual Studio Code**, Press  **Command + Shift + P**  on macOS or  **Ctrl + Shift + P**  on Windows or Linux, then type  **focus terminal.**  Press  **Enter**.
  2.  Enter  `sfdx force:lightning:component:create -n myFirstWebComponent -d force-app/main/default/lwc --type lwc`, and confirm with  **Enter**.
  **Note :** In above command "myFirstWebComponent" is the lwc component name and "force-app/main/default/lwc" is the location for lwc component.
 
###  **Step 4 :** 
###  #Deploy LWC to ORG:
you have to deploy the LWC component to use it in your org for this you can simply right click on lwc component and select "Deploy source to org".
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05ox13rbqh1adjq048zy.png)

**You will get "SFDX: Deploy Source to Org successfully ran" message if it deployed successfully , That's all you have you to do to create LWC component.**