Lightning Web Component Bundle – Folder Structure

We are going to discuss Lightning Web Component Bundle and files present in it in brief. If you create a LWC project , you will notice a folder is created along with files present in it.

We will create a LWC project in our VS code and name it as “welcomeHello”.The LWC component bundle created will look like this:

You will notice three files are created by default ie HTML file, Javascript file, and configuaration XML file.

Naming Convention

1.You can’t create a Lightning web component with same name as that of Aura component in the same namespace. For example, if you have an Aura component named c:welcomeHello,you can’t create a Lightning web component named c-welcomeHello.

2. While naming the LWC folder we have to name it in camel case like “welcomeHello”. But when refering to the component in markup,it maps to kebab case “<c-welcome-hello>”.

We will discuss following files one by one in detail:

HTML File

Every UI component must have an HTML file with root tag “template” so if you want to have any UI element like headings or paragraph we need to place inside these template tags.

HTML file follows naming convention of <component>.html , in our case , welcomeHello.html.

<template>
    <lightning-card title="HelloWorld" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>Hello, {greeting}!</p>
        </div>
    </lightning-card>
</template>

We can use standard HTML , Directives like if:true,for:each or base LWC components to develop desired HTML file

Javascript File

Every LWC component must have a JavaScript file. The JavaScript file defines the behaviour of HTML elements present in HTML file.

The JavaScript file follows the naming convention <component>.js, in our case  “welcomeHello.html”. JavaScript files in Lightning web components are ES6 modules, that means everything is local by default.

import { LightningElement,track } from 'lwc';
export default class WelcomeHello extends LightningElement {
    @track greeting = 'World';
}

In first staement, ‘lwc’ is nothing but a module which contains independent and reusable codes.

LightningElement is a custom wrapper class of a standard HTML element.

First we import LightningElement from lwc module and then we extends that particular LightningElement by creating our WelcomeHello class.

The export before class suggest that this class can be imported by other LWC components.

Configuration File – XML file

Configuration file defines the metadata values for the component. For example, the design configurations for lightning app builder or a community builder, so if you want to use your component inside the app page or record page or homepage or community then you need to specify those configuration here inside the meta file.

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

The configuration file follows the naming convention <component>.js-meta.xml in our case, “welcomeHello.js-meta.xml”.

API version parameter binds lightning web component to the Salesforce API version.

“isExposed” parameter decides whether the component is accessible inside a lightning app builder or community builder or not. So, if it is false it is not accessible.

“targets” parameter specifies where this component can be used like inside APPpage, records page or Home page etc.

CSS file

CSS file is not present by defualt at the time of component creation, but we can create it as an when required.

It has to have same name as that of folder. Naming convention would be <component.css> in our case – “welcomeHello.css”.

div{
    background-color: red;
}

SVG File

SVG file is not present by defualt at the time of component creation, but we can create it as an when required.SVG file is required if we want to use a custom icon in Lightning App Builder or Community Builder.

Additional Javascript Files

We can also include some additional JavaScript files in your Lightning web component folder.These files are generally used for sharing particular code snippets with other lightning web components or also for including some external javascript files.

These additional JavaScript files must be ES6 modules and names must be unique within the component’s folder.

We are going to learn more about this when we will use pub/sub model for communication between lightning web components

Stay tuned for next post !

Advertisement