Open your VS Code editor and press Ctrl+Shift+P on your keyboard to open the command palette.

• Search ‘SFDX: Create Project‘ and select
• Select project type ‘Standard‘
• Enter the name of your project
• Select your local folder where you want to store your project files.
• Finally, you have created your SFDX project on your local system.

Before creating the first lightning web component, let’s go over the component folder structure.

A Lightning web component that renders UI must include an HTML file, a JavaScript file, and a metadata configuration file. The files must have the same name so that the framework can autowire them.

The folder and its files must follow these naming rules.

• Must begin with a lowercase letter
• Must contain only alphanumeric or underscore characters
• Must be unique in the namespace
• Can’t include whitespace
• Can’t end with an underscore
• Can’t contain two consecutive underscores
• Can’t contain a hyphen (dash)

HTML file

Every user interface component requires an HTML file with the root tag <template>

The HTML file is named <component>.html, for example, myComponent.html

JavaScript File

A JavaScript file is required for each component. If the component renders UI, the HTML element is defined in the JavaScript file.

The JavaScript file follows the naming convention <component>.js, such as myComponent.js.

Configuration File

A configuration file is required for each component. The configuration file specifies the component’s metadata values, including supported targets and design configuration for Lightning App Builder and Experience Builder.

The configuration file follows the naming convention .js-meta.xml, such as myComponent.js-meta.xml

Create lightning web component

Press Ctrl+Shift+P on your keyboard to open the command palette.

• Search ‘SFDX: Create Lightning Web Component‘ and select
• Enter the name (e.g namasteLWC) of your component
• Select the directory where you want to create. Select force-app\main\default\lwc

Excellent work! You have created your first lightning web component successfully. In VS code, your lwc component will look like the image below.

You can see that the HTML file is empty, we only have the <template> </template> root tag. Let’s add some header and paragraph tags to the HTML file. Added some code in the javascript file to get the logged-in user name and display it on the component.

namasteLWC.html

namasteLWC.js

namasteLWC.js-meta.xml

Now we are done with lightning web component development let’s deploy it in Salesforce org to test.

Authorize your Salesforce org

Press Ctrl+Shift+P on your keyboard to open the command palette.

• Search ‘SFDX: Authorize an Org‘ and select
• Select ‘Project default‘ for the URL
• Enter alias name and enter.
• This command will be executed, and you will be redirected to the browser to log in to your Salesforce org. Log in with your credentials and grant the permissions.

After successful authorization of your org, open any of your lightning web component files and right-click. Select SFDX: Deploy This Source to Org (this command will deploy your lightning web component in your connected salesforce org.)

Open your Salesforce org and place this component on the lightning home page.