Create LWC Component In 4 Simple Steps
shivamkapasia0
Posted on October 23, 2021
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.
- Then Select standard project :
- 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.
Select your Org type and VsCode will open tab in browser and you have to login in your org using your org credentials.
After you authenticate in the browser, the CLI remembers your Org credentials. The success message should look like this:
Step 3 :
Create LWC Component:
-
By Using Command Pallete :
- In Visual Studio Code, press Command + Shift + P on macOS or Ctrl + Shift + P on Windows or Linux.
- 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.
- This will creates the needed files for your first Lightning web component.
-
By Using Command in terminal:
- In Visual Studio Code, Press Command + Shift + P on macOS or Ctrl + Shift + P on Windows or Linux, then type focus terminal. Press Enter.
- 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".
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.
Posted on October 23, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.