LWC Hello World! Example: Your First Component

LWC Hello World! Example: Your First Component

In this LWC tutorial, we will create and deploy a helloWorld in Lightning web component (LWC).

Please complete part 2 : Setup Lightning web components

‘helloWorld’ components seems to be an easy task but it takes multiple steps from creating, configuring to deploying our Lightning web components. 

To simplify the process, let’s break it down to multiple steps. 

1. CREATE SFDX PROJECT

A Salesforce DX project has a specific structure and a configuration file that identifies the directory as a Salesforce DX project. To create SFDX project, follows the following steps:

1. In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.

2. Type SFDX and Select SFDX: Create Project.

3. Enter helloWorldProject as the Project Name and Press Enter.

4. Select a folder to store the project.

5. Click Create Project.

2. AUTHORIZE DEVELOPER EDITION

1. In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.

2. Type SFDX and Select SFDX: Authorize an Org.

3. Press Enter to accept the Project Default login URL option.

4. Press Enter to accept the default alias.

5. https://login.salesforce.com will open in your browser. Log in using your credentials of the org from the last step i.e. Prequisite of LWC.

3. CREATE LIGHTNING WEB COMPONENT

1. In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.

2. Type SFDX and Select SFDX: Create Lightning Web Component.

3. Press Enter to accept the default force-app/main/default/lwc.

4. Enter helloWorld for the name of the new component. Press Enter and view the newly created files in vs code.

Now that we have created helloWorld ( a lightning web component), we can start adding our custom logic in this component.

In helloWorld folder, salesforce provide us with 3 files.

1. helloWorld.html                 HTML file to contain view of the component
2. helloWorld.js                       JS file to contain logic of the component
3. helloWorld.js-meta.xml   XML file to contain configuration of component.

These files are necessary for creating and deploying LWC component. We will see more on this file structure in next blog.

CONFIGURE JS FILE 

helloWorld.js

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {

}

This file contains default class named after component, in this case its helloWorld. 

You will also find import and export statement,

Import statement – Used to import module into component,
                                      here it is LightningElement.
Export statement – Used to export class for other components to use.

We will put our custom logic by replacing the ‘// our custom logic’ at line 4.

So lets create a JS variable to store the Hello World string.

message = ‘Hello World’

NOTE : If you assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable.

import { LightningElement } from 'lwc';

export default class HelloWorld extends LightningElement {

     message = 'Hello World';

}

This completes our logic for helloWorld program. Lets more on to View of the component i.e. HTML file.

CONFIGURE HTML FILE 

helloWorld.html

<template>

</template>

This file contains the html code inside <template> tag. When a component renders, the tag is replaced with the name of the component.

We will put our custom code by replacing the ‘//our custom code’ at line 2.

We will utilize the global variable ‘message’ we have created in our JS file.

{ message }

<template>
           {message}
</template>

CONFIGURE META FILE 

helloWorld.js-meta.xml

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

</LightningComponentBundle>

Now let us configure the component to display in Lightning Experience. We will use xml file to configure isExposed paramter include inside the file.

We have replace <isExposed>false</isExposed> with as following to expose the LWC

<isExposed> true </isExposed>

Next we have to target the component using <target> tag. We can expose our LWC component to AppPage, RecordPage, HomePage, etc.
Add the following lines after <isExposed>true</isExposed>

<targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>
</targets>

So this makes our helloWorld.js-meta.xml file becomes as follows:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="helloWorld">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__HomePage</target>
<target>lightning__RecordPage</target>
</targets>
</LightningComponentBundle>

4. DEPLOY COMPONENT TO ORG

1. Right-click the default folder.

2. Select SFDX: Deploy Source to Org.

5. ADD COMPONENT TO LIGHTNING EXPERIENCE

1. In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS.

2.   Type SFDX and Select SFDX: Open Default Org.

3. Click the app launcher icon to open the App Launcher, then click Sales.

4. Click on Setup menu, then click Edit Page.

5. Drag and drop helloWorld component to display it on screen.   

6.   Save, activate and assign as Org default.

7. Click back to return to Home Page. 

Congratulations. You’ve successfully made your first Lightning web component (LWC) !!

So now let’s move to our next part of LWC tutorials series,
Part-4 Architecture of LWC, where we will see in-depth detail of each type of file. 

Make sure to subscribe and comment down below your feedback.

Till then,
Thanks for reading! & PEACE

(Visited 2,373 times, 3 visits today)

3 Replies to “LWC Hello World! Example: Your First Component

  1. Hi Alekh!

    I’m a newbie when it comes to LWC and stumbled upon this excellent guide and decided to give it a try. I’m no code expert but have fiddled some with html, java and python. I have followed all the steps to get LWC running but I’m stuck on Step 4 in this guide. When I try to deploy I get this error message in Visual Studio Code: sf:INVALID_OPERATION: INVALID_OPERATION: testLevel of NoTestRun cannot be used in production organizations

    I have activated Dev Hub in prod but still the same error. Do you have any tips for me?

  2. Hi Fredrik,

    Thanks for this wonderful feedback.

    Can you check whether you are deploying on correct org?

    The command force:source:deploy works on sandboxes, Developer Edition orgs, and trail orgs, but not production orgs. (we are using developer edition)
    For production orgs, you can use force:mdapi:deploy and force:mdapi:retrieve

    The following links will be useful for this scenario :

    Documentation : https://developer.salesforce.com/docs/atlas.en-us.sfdx_dev.meta/sfdx_dev/sfdx_dev_develop_any_org.htm

    Links :
    https://salesforce.stackexchange.com/questions/261440/sfinvalid-operation-invalid-operation-testlevel-of-notestrun-cannot-be-used-i
    https://salesforce.stackexchange.com/questions/244951/how-to-push-code-to-production-with-visual-studio-code-dx

    All the best for LWC journey.
    Always available for help at [email protected]

Leave a Reply