Lightning Web Components Folder Structure

Hello Trailblazers! In this post, we will discuss the basics of the Lightning Web Component framework. I am writing a series of blogs on this topic. This series will help all the people who are completely new to the Lightning Web Components framework.

What are Lightning Web Components?

Before LWC, we must learn what are Web Components. Web Components are reusable custom HTML Elements. They contain not only the UI but also the functionality which can be used without any collision with other components.  

Web Components are part of modern web standards. They consist of three main technologies.

• Custom Elements
  A set of JS API that you can use to define custom elements and their behavior.
• Shadow Dom
  An encapsulated DOM tree that is rendered privately on the main DOM. With the help of Shadow Dom your custom components can't override each other's CSS and also they can't access each other's child elements. Only the root of the shadow tree can access those.
• HTML Template
  The template and slot tags in HTML, the content inside those elements are not rendered by default, so the component can generate it in the way that you want at any time.

The lightning web components are built on top of the modern Web Components stack. Most of the code in Lightning Web components can natively run in browsers. They are also lightweight and deliver great performance. Like the Aura components, there are also prebuilt components available in LWC.

Supported Browsers in LWC

Supported Javascript

• ES6 (ECMAScript 2015)
• ES7 (ECMAScript 2016)
• ES8 (ECMAScript 2017)—excluding Shared Memory and Atomics
• ES9 (ECMAScript 2018)—including only Object Spread Properties (not Object Rest Properties)
• Static public fields—currently at TC39 Stage 3

Contents of Lightning Web Component Bundle

The lightning component bundles all its components inside a folder that has the same name as your component. For example, your component is myFirstLwc, notice the camel case, that you need to follow. You can use underscore in the name but try to avoid that.

This folder contains 6 main files.

1. HTML file

This file contains the HTML markup of your component. All contents of the HTML file must be enclosed in the template tag. 

The naming convention for this file i <component>.html for example myFirstLwc.html.

<template>
    <!-- Your HTML code-->
</template>

2. Javascript File

This file defines the functionality of the module. We write here the code handle component events, custom events, to fetch data, to save data. Every component that contains UI needs to have at least below code in its Javascript file.

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

}

The naming convention for js file is <component>.html, example myFirstLwc.js




3. Component Configuration File

Every component must have the configuration file, this file contains the metadata for the component. This file defines the properties of the component like where it can be used in Salesforce, also the design attributes that can be used by admins to customize the component.

Here is the basic configuration file example

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

The naming convention for js file is <component>.js-meta.xml, example myFirstLwc.js-meta.xml

4. Component CSS File

This file contains the custom styling for the component. You can use the standard CSS syntax to stylize your component.

The naming convention for js file is <component>.css, example myFirstLwc.css

5. Component Icon SVG

By default, lightning components have the lightning icon as thumbnails, but you can customize that and have your own thumbnail for your component when it is displayed in the app builder or community builder. For custom thumbnails, we put the SVG code in this file. 

In addition to this, you can add multiple HTML files and JS files if needed in a single component.

LWC Series

1. Lightning Web Components Folder Structure
2. Lightning data service with LWC

References

Web Components