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:

javascript
1import { LightningElement } from 'lwc';
2
3export default class ComponentName extends LightningElement {
4    // Component logic
5}

{componentName}.html:

html
1<template>
2    <!-- Component template -->
3</template>

{componentName}.js-meta.xml:

xml
1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3    <apiVersion>62.0</apiVersion>
4    <isExposed>true</isExposed>
5    <targets>
6        <target>lightning__Tab</target>
7        <target>lightning__AppPage</target>
8        <target>lightning__HomePage</target>
9    </targets>
10</LightningComponentBundle>

2. Custom Tab (Optional)

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

xml
1<?xml version="1.0" encoding="UTF-8"?>
2<CustomTab xmlns="http://soap.sforce.com/2006/04/metadata">
3    <label>Tab Label</label>
4    <lwcComponent>{componentName}</lwcComponent>
5    <motif>Custom70: Handsaw</motif>
6</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
1<?xml version="1.0" encoding="UTF-8"?>
2<FlexiPage xmlns="http://soap.sforce.com/2006/04/metadata">
3    <flexiPageRegions>
4        <itemInstances>
5            <componentInstance>
6                <componentName>c:{componentName}</componentName>
7                <identifier>{componentName}1</identifier>
8            </componentInstance>
9        </itemInstances>
10        <name>main</name>
11        <type>Region</type>
12    </flexiPageRegions>
13    <masterLabel>Page Label</masterLabel>
14    <template>
15        <name>flexipage:defaultAppHomeTemplate</name>
16    </template>
17    <type>AppPage</type>
18</FlexiPage>

Deploy

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

After Deployment

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