Lightning Web Components Basics: Component Folder & File Structure

In this blog post, I am going to discuss about mandatory files for creating Lightning Web Component. There are following Files that we can create but 1st three files are necessary to create Lightning Web Component.

Prerequisite

• How to create Lightning Web Component 

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)
5. SVG Icon
6. Extra JS File
7. Component Test File

  NOTE: Files with * are mandatory.

The folder and its files must follow these naming rules:

• Must begin with a lowercase letter
• Must contain only alphanumeric or underscore characters
• Must be unique in the namespace
• Should not contain whitespace
• Should not end with an underscore
• Should not contain two consecutive underscores
• Should not contain a hypen (dash)
• Use camel case (each word or abbreviation in the middle of the phrase begins with a capital letter, with no intervening spaces or punctuation) to name a component. e.g. helloWorld  
• Camel case component folder names map to kebab-case in markup. e.g. <c-hello-world>  where c is the default namespace.   
                  

    1. Component HTML File (helloWorld.html)

• Create the HTML for a Lightning web component declaratively, within the template tag
•  <template> is the root tag of HTML file
•  The HTML template element contains your component’s HTML.

   2. Component JavaScript File (helloWorld.js)

• The JavaScript file follows the naming convention <component>.js, such as helloWorld.js.
• The class name should be in Pascal Case, where the first letter of each word is capitalized. For helloWorld.js, the class name should be HelloWorld.
• JavaScript files in Lightning web components are ES6 modules.

Import Statement :

• To import a class, function, or variable declared in a module.
• The core module in Lightning Web Components is lwc.
• The import statement imports LightningElement from the lwc module.

Export Statement : 

• Allows other code to use a class, function, or variable declared in a module

3. Component Configuration File (helloWorld.js-meta.xml)

• The configuration file defines the metadata values for the component, including the design configuration for Lightning App Builder and Community Builder.
• Each Lightning web component folder must include a configuration file named <component>.js-meta.xml.

Component Configuration File Tags

apiVersion Tag :

• A double value that binds the component to a Salesforce API version.

isExposed Tag :

• 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.

targets Tag :

• targets specify which types of Lightning pages the component can be added to in the Lightning App Builder.
• If you want your component to appear in the Lightning App Builder or in Community Builder, specify at least one Lightning page type.
• It supports target subtag where we can specify Lightning Page Type.

target Tag :

Following Lightning Page Type can be used in target tag.

VALUE	DESCRIPTION
lightning__AppPage	Enables a component to be used on an App page in Lightning App Builder.
lightning__HomePage	Enables a component to be used on a Home page in Lightning App Builder.
lightning__RecordPage	Enables a component to be used on a record page in Lightning App Builder.
lightning__UtilityBar	Enables a component to be used as a utility item on the utility bar in the App Manager.
lightning__FlowScreen	Enables a component to be used on flow screens in Flow Builder.
lightning__Tab	Enables a component to be used in a custom tab in Lightning Experience or the Salesforce mobile app.
lightning__Inbox	Enables a component to be used in Lightning App Builder to add to email application panes for the Outlook and Gmail integrations.
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. When the component is selected on the page, the properties appear.
lightningSnapin__ChatMessage	Enables a component to be selected from Embedded Service Chat Setup. If a component imports the lightningsnapin/baseChatMessage module, it must specify the lightningSnapin__ChatMessage target.

Other Tags used in Component Configuration File :

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>45.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Lightning Web Component Basics</masterLabel>
  <description>Folder and File Structure</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>Product__c</object>
      </objects>
      <supportedFormFactors>
        <supportedFormFactor type="Large" />
     </supportedFormFactors>
   </targetConfig>
   <targetConfig targets="lightning__AppPage, lightning__HomePage">
    <property name="prop2" type="Boolean" />
    <supportedFormFactors>
      <supportedFormFactor type="Small" />
    </supportedFormFactors>
   </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

masterLabel Tag :

• We can put title of the component in this tag which appears in list views.

targetConfigs Tag :

• It lets you specify behavior specific to each type of Lightning page including things like which objects support the component.
• Supports the property, objects, and supportedFormFactors subtags.

property Tag :

• Specifies a public property of a component.

objects Tag :

• It includes one or more objects the component is supported for. 
• Works only inside a parent targetConfig that’s configured for lightning__RecordPage.
• It supports object subtag.

object Tag :

• Defines which objects the component is supported for. Use one object tag for each supported object. You can’t use ‘*’ to denote all objects.
• Refer this link for supported objects Tag :https://developer.salesforce.com/docs/atlas.en-us.uiapi.meta/uiapi/ui_api_get_started_supported_objects.htm

supportedFormFactors Tag :

•  A set of one or more form factors or devices that the component supports. 
•  Supports the supportedFormFactor subtag.

 The supportedFormFactor tag :

• Large—Represents the desktop form factor. Supported for all page types.
• Small—Represents the phone form factor. Supported for lightning__AppPage only.