DEV Community

Cover image for Create LWC Component In 4 Simple Steps
shivamkapasia0
shivamkapasia0

Posted on

Create LWC Component In 4 Simple Steps

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
  • Then Select standard project : Image description
  • 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

  • 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

  • Click allow after login:
    Image description

  • After you authenticate in the browser, the CLI remembers your Org credentials. The success message should look like this:
    Image description

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
    3. This will creates the needed files for your first Lightning web component. Image description
  • 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

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.

Discussion (0)