Chapter 8: Understand Lightning Web Component Folder Structure

In this Chapter, we are going to discuss the Component folder structure

Component File Structure

1. HTML File (helloWorld.html)
2. JavaScript File (helloWorld.js)
3. Configuration File(helloWorld.js-meta.xml)
4. CSS File (helloWorld.css)

LWC must contain

• HTML File
• JavaScript File
• Metadata Configuration File

-- force-app
--| main
---| default
----| lwc
-----| myChildComponent
------| myChildComponent.html
------| myChildComponent.js
------| myChildComponent.js.meta.xml

An optional CSS file must have the same name, including capitalization and underscores

Folder and File Naming Convention

• Must begin with a lowercase letter – eg- sampleComponent, myFirstComponent
• Must contain only alphanumeric or underscore character
• Must be unique in namespace
• Cannot include white space – “my firstComp” isn’t a valid name
• Cannot end with underscore
• Cannot contain two consecutive underscore
• Cannot contain a hyphen

Note : If you start with uppercase for name it will automatically change to lowercase when you hit enter

HTML file

Lightning Web Components uses the templating system, which uses the virtual DOM to render components. Every component requires an HTML file with the root tag .

• File Must start with Template tag
• It holds component markup. We can use normal HTML or base lightning components to create this page. All the content will be written inside the template tag.

When a component renders, the template tag is replaced with the component’s name

// When it gets rendered it will be converted in the following markup
<c-hello-world>
</c-hello-world>

JavaScript File 

Every component must have a JavaScript file. All the client side logic is written in JavaScript File.

To understand this JS file better, let’s understand concept of module

JS modules (also known as “ES modules” or “ECMAScript modules”)

Earlier there was no concept of modules in JavaScript. It was impossible to directly reference or include one JavaScript file in another. As our application grew bigger, we wanted to split it into multiple files, so called “modules”.

ECMAScript 2015 (ES6) introduces this module system.  A module may contain a class or a library of functions for a specific purpose.

Modules can use special directives export and import to call functions of one module from another one.

Exporting a Module

The export keyword can be used to export components in a module. Exports in a module can be classified as follows

Default Exports
Named Exports

Default Exports

Modules that need to export only a single value can use default exports. There can be only one default export per module.

Synatax

export default component_name

Example

export default class HelloWorld extends LightningElement {}

Export statement has class name HelloWorld which is same as the File name. Class name starts with uppercase.

Extends LightningElement which means we want to import all properties of lightning element as we construct our custom element.

Importing a Module

To be able to consume a module, use the import keyword.

Syntax

import {component1} from module_name

Example

import { LightningElement } from 'lwc';

The core module in Lightning Web Components is lwc. The import statement imports LightningElement from the lwc module. LightningElement is a custom wrapper of the standard HTML element.It extends element to create a JavaScript class for a Lightning web component.

To import more properties use comma in between

Syntax

import {component1,component2..componentN} from module_name

Example

import { LightningElement,track,wire } from 'lwc';

Metadata Configuration File

It defines metadata of the component. What is the component, where you can use it and how it can be used.

apiVersion:

API version of Lightning Web Component

<apiVersion>48.0</apiVersion>

isExposed :

where Lightning component will be exposed.

• isExposed to false: The component is not exposed to Lightning App Builder or Community Builder.
• isExposed to true allows the component to be used in Lightning App Builder or Community Builder and define at least one <target>, which is a type of Lightning page

<isExposed>false</isExposed>

More Complicated File can look like this:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Best Component Ever</masterLabel>
  <description>This is a demo component.</description>
  <targets>
      <target>lightning__RecordPage</target>
      <target>lightning__AppPage</target>
      <target>lightning__HomePage</target>
  </targets>
  <targetConfigs>

      <targetConfig targets="lightning__RecordPage">

          <property name="prop1" type="String" />
          <objects>
              <object>Account</object>
              <object>Opportunity</object>
              <object>Warehouse__c</object>
          </objects>
      </targetConfig>

      <targetConfig targets="lightning__AppPage, lightning_HomePage">

          <property name="prop2" type="Boolean" />
      </targetConfig>

  </targetConfigs>
</LightningComponentBundle>

masterLabel :

Title of the component which appears in list views.

<masterLabel>My First Component </masterLabel>

description:

<description>My First Lightning Web Component </description>

target:

Where component can be added

<targets>
<target>lightning__RecordPage</target>
</targets>

You can use your Lightning Web Component at different places in Lightning Experience, refer below table:

VALUE	DESCRIPTION
lightning__AppPage	Enables a component to be used on a Lightning page of type App Page.
lightning__HomePage	Enables a component to be used on a Lightning Experience Home page.
lightning__RecordPage	Enables a component to be used on a Lightning record page.
lightningCommunity__Page	Enables a component to be used on a Lightning community page in Community Builder.
lightningCommunity__Default	Used together with lightningCommunity__Page. Enables a component that includes configurable properties to be used on a Lightning community page in Community Builder.

targetConfig:

It lets you specify behavior specific to each type of Lightning page including things like which objects support the component.

   <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>Account</object>
            </objects>
        </targetConfig>
    </targetConfigs>

Reference

Salesforce Lightning Commands

ES6 Module