Set Up Visual Studio Code

You already know that Lightning Web Components is a new programming model introduced by Salesforce for building Lightning components. In this article, we’ll discuss what tools you need to build Lightning web components and how to build one.

To create and develop Lightning Web Components and use their powerful features and performance benefits, you need to set up Salesforce DX. You also use Visual Studio Code, which is the recommended Salesforce development environment. You write a simple Lightning web component and add it to a page in Lightning Experience. Below are the steps to create a Lightning Web Component with conditional rendering.

Steps to build Lightning web components

  1. Setup Visual Studio Code
  2. Create a Project & connect to Salesforce org
  3. Create a Lightning web component
  4. Deploy & add to a Lightning page

1. Set Up Visual Studio Code

Visual Studio code editor has easy-to-install extensions for syntax highlighting, code completion, and more. First, install Salesforce extensions for Visual Studio Code. Search for Salesforce Extension Pack and click Install.

Search for Lightning Web Components and click Install. Re-launch Visual Studio Code to complete the installation.

Make sure the editor is ready by typing sfdx, you should see the commands already.

2. Create a Project & connect to Salesforce org

  1. In Visual Studio code, press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows.
  2. Type SFDX.
  3. Select SFDX: Create Project
  4. Enter a Project Name & click create.
  5. Select SFDX: Authorize an Org. Login & Allow

Success message shows like this.

3. Create a Lightning web component

  1. In Visual Studio code, press Command + Shift + P on a Mac or Ctrl + Shift + P on Windows.
  2. Type SFDX.
  3. Select SFDX: Create Lightning Web Component.
  4. Press Enter to accept the default force-app/main/default/lwc.

Give a name to the component, say Cloud Fountain. This simple component displays the text ‘Hello Cloud Fountain’

This would be your HTML file. In this, we are displaying the text “hello {greeting}”. Note that greeting is a variable here

<lightning-card title=”HelloWorld” icon-name=”custom:custom14″>
<p>Hello, {upperCaseName}!</p>
<lightning-input name=”last_name” label=”Last Name” onchange={changeHandler}></lightning-input>
<template if:false={showLastNameOnly}>
<lightning-input name=”first_name” label=”First Name” onchange={changeHandler}></lightning-input>
<lightning-input type=”checkbox” label=”Show Last Name only” onchange={handleCheckBox}></lightning-input>

view rawhelloWorld.html hosted with ❤ by GitHub

This is the .js file. In this javascript file, we are assigning a value ‘Cloud Fountain’ to the variable called ‘greeting’. @track indicates, it is a variable.

import { LightningElement, track } from ‘lwc’;
export default class HelloWorld extends LightningElement {
// @track greeting = ‘World’;
@track firstName = ”;
@track lastName = ”;
@track showLastNameOnly = false;
changeHandler(event) {
// this.greeting =;
const fldValue =;
if(fldValue === ‘first_name’)
this.firstName =;
else if(fldValue === ‘last_name’)
this.lastName =;
this.showLastNameOnly =;
get showLastNameOnly(){
return this.showLastNameOnly;
get upperCaseName(){
return `${this.lastName}`.toUpperCase();
return `${this.firstName} ${this.lastName}`.toUpperCase();

view rawhelloWorld.js hosted with ❤ by GitHub

This is the .xml file. In this file, we are setting isExposed to True implies, this component is available to be used in the Lightning pages. Which type of Lightning pages is defined in the targets.

<?xml version=”1.0″ encoding=”UTF-8″?>
<LightningComponentBundle xmlns=”” fqn=”helloWorld”>

view rawlcb.xml hosted with ❤ by GitHub

That’s it. Now you can deploy this project to Salesforce

4. Deploy & Add the component to Lightning Page

Just right click the file and select SFDX: Deploy Source to Org

After deployment, the lightning web component will be available in the App Builder as a custom component on the left side menu to use in the page.

Thank you for reading this post. Please feel free to leave feedback.

Author: CloudFountain

We started as a side business in 1999 and have since grown to become a leading provider of IT solutions for businesses. With around 30 employees across several countries, we offer a wide range of services, including IT support, hosting, and custom software development.Over the years, we have served approximately 1000 customers, ranging from small startups to large enterprises. Our mission is to provide cutting-edge technology solutions that help our clients achieve their business goals. We pride ourselves on our exceptional customer service and attention to detail, and we work closely with each client to understand their unique needs and provide tailored solutions that meet their specific requirements.At CloudFountain, we believe that technology can be a powerful tool for growth and success. That’s why we stay on top of the latest trends and advancements in the industry, so we can provide our clients with the best possible solutions. Whether you need IT support, hosting services, or custom software development, our team of experts is here to help. Contact us today to learn more about how we can help your business succeed.