File Structure in LWC

File Structure in LWC

Let’s drill down how the LWC components are structured as a file system. A lightning web component consists of a folder that bundles its component’s files.

COMPONENT FOLDER

To create a component, first create a folder that bundles your component’s files. The folder and its files must have the same name, including capitalization and underscores.

NOTE : While naming LWC components, always use first letter as lowercase.

Namespace in lightning web component is separated from the folder name by a hyphen(-). For example, the markup for the Lightning web component with the folder name hello in the default namespace is .

Imagine component name has more than one word, like “helloworld”, then

1. We will use camel case to name/create component i.e. helloWorld
2. We will use kebab-case to reference component in markup of other component i.e. hello-world

Camel case component folder name map to kebab-case in markup.

<!-- parent.html -->
<template>

    <c-hello-world></c-hello-world>  <!-- kebab-case -->
	
</template>

Simple Component Creation

LWC brings together your Salesforce knowledge and familiarity with standard technologies like HTML, JS. You can simply create components using HTML, JavaScript, and CSS.

1. HTML provides the structure for your component.
2. JavaScript defines the core business logic and event handling.
3. CSS provides the look, feel, and animation for your component.

COMPLETE FILE STRUCTURE IN LWC

HTML
File *

JS 
File *

Config
File *

CSS
File

SVG
Icon

Extra
JS 
File

Comp-
onent
Test

[ File with * are mandatory for lightning web component ]

# COMPONENT HTML FILE

<!-- parent.html -->
<template>

    <c-hello-world></c-hello-world>  <!-- kebab-case -->
	
</template>
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
  1. Every UI Component must have an HTML file with the root tag <template>.
  2. The HTML file follows the naming convention <component>.html  as helloWorld.html
  3. HTML <template> element contains your component’s HTML.
  4. When a component renders, the <template> tag is replaced with the name of the component.

# COMPONENT JS FILE

import { LightningElement } from 'lwc';
export default class HelloWorld extends LightningElement {


}
  1. Every component must have a JS File.
  2. If the component renders UI, the JS File defines the HTML element.
  3. The HTML file follows the naming convention <component>.js as helloWorld.js
  4. The Convention for the class name is to be Pascal Case i.e. first letter of each word is capitalized.
    myComponent.js  has class name as MyComponent

UNDERSTANDING IMPORT AND EXPORT STATEMENT

  1. Here, import statement imports LightningElement from the lwc module.

    import { LightningElement } fromlwc‘;

  2. LightningElement is a custom wrapper of the standard HTML element. Extend LightningElement to create a JavaScript class for a Lightning web component.
  3. The export statement keywords export a HelloWorld class for other components to use.

    export
    default class HelloWorld extends LightningElement {

    // Your code here
    }

# COMPONENT CONFIG FILE

<?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>
  1. Every component must have a configuration file.
  2. The configuration file defines the metadata values for the component, including the design configuration for Lightning App Builder and Community Builder.
  3. The configuration file follows the naming convention <component>.js-meta.xml, such as helloWorld.js-meta.xml.
  4. To add the lightning web components, we have to add in our config file. 
    : Specifies which type of lightning page the component can be added to.
  5. Available values: AppPage, RecordPage, HomePage, Community.

# COMPONENT CSS FILE

h1 {
    font-size: xx-large;
}
  1. A component can include a CSS file. Use standard CSS syntax to style Lightning web components.
  2. To style a component, create a style sheet in the component bundle with the same name as the component.
  3. If the component is called helloWorld, the style sheet is helloWorld.css.
  4. The style sheet is applied automatically.

# COMPONENT SVG ICON

  1. A component can include an SVG resource to use as a custom icon.
  2. To include an SVG resource as a custom icon for your component, add SVG resource to your component’s folder.
  3. It must be named .svg. If the component is called helloWorld, the svg is helloWorld.svg.
  4. You can only have one SVG per folder.

# ADDITIONAL JS FILES FOR SHARING CODE

  1. In addition to the JavaScript file that creates the HTML element, a component’s folder can contain other JavaScript files.
  2. These additional JavaScript files must be ES6 modules and must have names that are unique within the component’s folder.

# COMPONENT TESTS

  1. To create Jest tests for a component, create a folder called __tests__ at the top level of the component’s folder. 
  2. Jest runs JavaScript files in the __tests__ directory. 
  3. Test files must have names that end in “.js”, and we recommend that tests end in “.test.js.
  4. You can have a single test file with all of your component tests, or you can have multiple files to organize related tests.
  5.  Test files can be placed in sub folders.

As you have completely understood the architecture of LWC.

It’s time to create some magic with the help of CSS in lightning web components. 

Till then,
Thanks for reading! & PEACE

(Visited 2,229 times, 1 visits today)

1 Reply to “File Structure in LWC

Leave a Reply