Getting Started with LWC | Setup local server for Lightning web components | First LWC Component

Hello Trailblazers,

Welcome to the first tutorial in LWC Tutorial Series. In this tutorial, we'll cover the below points :-

1. What is LWC ?

2. Why should we use LWC when Aura is here ? 😎

3. Comparison between Old and New Web Stacks

4. Setting up Local Server for Lightning web component development

5. Creating your first LWC component with a little bit of HTML and JavaScript

6. Have a look at the references and resources for learning LWC

This tutorial is published on SFDC Stop YouTube Channel. So, if you want to learn in detail, have a look at the tutorial video down below. Otherwise, you can scroll down to the presentation and have a look at the code gist with brief explanation where we created our First LWC Component

Tutorial Video

Presentation

The presentation used in this tutorial is published on Slideshare and can be viewed below.

Getting Started with Lightning Web Components | LWC | Salesforce from Rahul Malhotra

Code Gist with brief Explanation

Now let's have a look at the code using which we created our first LWC component. My component name is myFirstLWC and the code is given below:-

HTML Snippet (myFirstLWC.html)

As you can see in the above code, I created a simple lighting-card that consist of a lightning-input field with a label Write your Name. This field has an onchange handler associated which is calling my updateName method present in the javascript file. The value of this field is binded with the name variable which we're going to define in our js file. Below that, we just have displayed a text as:- Hello {name}, Welcome to your first LWC Component. In this statement everything is static except the name variable which is declared in the JavaScript file and being used here, by specifying it within curly braces{}.

JavaScript Snippet (myFirstLWC.js)

As you can see above, I have just created a name variable which is having a default value empty. Below that we have our updateName method defined which is responsible to udpate the name variable with the value of the input field as this method will be called automatically whenever the value of input field is changed by reacting to the onchange handler. The onchange event will be passed onto this method automatically and inside this method, we're getting the reference to the HTML element which is changed by using event.target. As, we need the value of that HTML element, we're getting that using event.target.value. We're assigning that value to the name variable that will automatically cause the HTML to re-render as the name variable used in HTML as {name}, is updated now.

The component will look like this initially:-

As you click on the lightning-input field and write anything there. The component will be re-rendered automatically and you'll see your text after hello as shown below:-

I am viewing the LWC component in the LWC Local Server that I've setup in my system. If you've Node.js and SFDX CLI installed in your system, you can also setup the local LWC Server by executing the below commands in the terminal:-

sfdx plugins:install @salesforce/lwc-dev-server

The above command will install lwc-dev-server in your local system. After it's installed, open the terminal again and run the below command:-

sfdx plugins:update

This command will basically update all the sfdx plugins so that you can run your LWC component on the local server installed.

After your local server is installed successfully, you can preview the LWC component by right clicking on the lwc component in your VSCode project and choosing SFDX: Preview Component Locally option as shown below:-

Choose the first option, i.e. Use Desktop Browser to preview the component locally in your default browser as shown below:-

Make sure you have Salesforce Extension Pack installed in VSCode. You can have a look at this tutorial to setup VSCode for Salesforce Development:- How to setup Visual Studio Code for Salesforce ?

You can also use the below command to start the local dev server in case the extensions are not working properly:-

sfdx force:lightning:lwc:start

In case you're follwing some issues, installing the sfdx plugins, read the instructions carefully as it's possible that you're missing some node js packages, you can install those packages by using the below command:-

npm install -g <package name>

-g  is basically used to install the package globally so that you can use it anywhere.

That's all for this tutorial. I hope you liked it. All the code used in this tutorial is available on GitHub and you can have a look at that by clicking here. Make sure to have a look at the video if you want to learn in detail and let me know your feedback in the comments down below.

Happy Trailblazing..!!