Create LWC with Tab

Create LWC with Tab

Creates a new Lightning Web Component along with the necessary tab and flexipage metadata to make it accessible as a standalone page.

Arguments

$ARGUMENTS should be the component name in camelCase (e.g., pledgeList)

Files to Create

1. LWC Component

Create directory: force-app/​main/​default/​lwc/​{componentName}/

{componentName}.js:

import { LightningElement } from 'lwc';

export default class ComponentName extends LightningElement {
    // Component logic
}

{componentName}.html:

<template>
    <!-- Component template -->
</​template>

{componentName}.js-meta.xml:

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

2. Custom Tab (Optional)

Create: force-app/​main/​default/​tabs/​{TabName}.tab-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<CustomTab xmlns="http://soap.sforce.com/​2006/​04/​metadata">
    <label>Tab Label</​label>
    <lwcComponent>{componentName}</​lwcComponent>
    <motif>Custom70: Handsaw</​motif>
</​CustomTab>

3. Lightning App Page (Recommended)

Create: force-app/​main/​default/​flexipages/​{Page_Name}.flexipage-meta.xml

Important: Component instances MUST have an <identifier> element or deployment fails.

<?xml version="1.0" encoding="UTF-8"?>
<FlexiPage xmlns="http://soap.sforce.com/​2006/​04/​metadata">
    <flexiPageRegions>
        <itemInstances>
            <componentInstance>
                <componentName>c:{componentName}</​componentName>
                <identifier>{componentName}1</​identifier>
            </​componentInstance>
        </​itemInstances>
        <name>main</​name>
        <type>Region</​type>
    </​flexiPageRegions>
    <masterLabel>Page Label</​masterLabel>
    <template>
        <name>flexipage:defaultAppHomeTemplate</​name>
    </​template>
    <type>AppPage</​type>
</​FlexiPage>

Deploy

sf project deploy start \
  --source-dir force-app/​main/​default/​lwc/​{componentName} \
  --source-dir force-app/​main/​default/​flexipages/​{Page_Name}.flexipage-meta.xml \
  --target-org lubavitchrv_partial \
  --wait 10

After Deployment

New flexipages require activation before appearing in App Launcher. Use the activate-lightning-page skill if needed.