Our Blog

Create First Component With LWC (Lightning Web Component)

Create First Component With LWC (Lightning Web Component)

Create First Component with LWC :

To create a component in LWC (Lightning Web Component), we need to complete presquite mention here.

In VS Code editor press Command + Shift P, enter sfdx, and select SFDX: Create Lightning Web Component. For the project name, enter lwcFirstCmp.

Use the camel case to name your Lightning web components (lwcFirstCmp) because it maps to kebab-case in HTML (<c-lwc-First-Cmp).

It will create By default three files:

  1. Html
  2. js
  3. js-meta.xml


For Example :




    <lightning-card title="HelloWorld" icon-name="custom:custom14">


            This is My First LWC Component





js :


import { LightningElement } from 'lwc';

export default class lwcFirstCmp extends LightningElement {



js-meta.xml :


<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">


If you are using scratch org then push the code to the scratch org else if you are using Non-scratch org then deploy it.

Add the component at the desire page or app and you are good to go.

 Local Development:

To view the first component which you have Created with LWC in the local development server, we have to start the server.


To Start the Local Development Server:


  1. Start the server
sfdx force:lightning:lwc:start


it will auto-refresh when u save the code in vscode.

it will increase the development speed as u don’t have to push or deploy code in org to see the result.


If you have any issue feel free to add a ticket and let us know your views to make it better https://webkul.uvdesk.com/en/customer/create-ticket/


Leave a Comment

Comments (0)

Please verify that you are not a robot.

Welcome back

Welcome back! Please enter your details

One or more fields have an error. Please check and try again.

Forgot Password?

Tell us about Your Company

How can we help you with your business?