LWC Deployment from VS Code

Deploy Lightning Web Component Files

Prior to Deploying the Lightning Web components need Developer org.

Set up Developer Environment

we develop a Lightning web component using VS Code with the Salesforce extension. We deploy the files to an org and build an app to use your component.

We need the following developer tools

1. Visual Studio Code with the Salesforce Extension Pack
2. Salesforce CLI
3. Dev Hub enabled org
4. My Domain deployed to users in your Dev Hub enabled org

1.    Visual Studio Code with the Salesforce Extension Pack

VS code can be downloaded from here.

Install VS code into Machine 

2.    Salesforce CLI

Salesforce CLI can be downloaded from here.

On downloading Salesforce CLI, install  into your machine, Setup the Environment variables.

Set Up Lightning Web Component Files for Use in an Org

Step1:

On installing VS Code and Salesforce CLI into your Mahine,

Head over the installed VS code, and install the Salesforce Salesforce Extension Pack.

👇

Salesforce Extension Pack

If you successfully installed Salesforce CLI and set up its Environment Variable can step into next steps

Step2:

Create the Scratch Org, Prior to the scratch Org creation, should have developer org created and atleast one user should be available.

If not have any developer Org created, Create from here.

1.    In VS code, press  keys

👉CTRL +SHIFT +P

or

Hit over the Gear key

 

👇

👉Crate the Project by using above step >> SFDX: Create Project >> Enter >>Select Standard Project Template(Default) >> Enter the Project Name>> It will Ask the Workspace Location >> Select Create Project

On above steps after succesful creation of Creating the Project you end up with below 

👉

Next Step is to Authorize the developer org created  previosuly

👉

On head over the above step>> IT will popsup type for what type org is to Authorize

>> Select based on your choice of working>> enter alias >> hit enter

Now It will open the Login Page of Salesforce >> Enter the credential and >> Login

👉

Now Its time to create your Lightning web component

Hit Gear icon or CTRL + SHIFT + P

👉

Enter the Name of the Lightning Web Component

Use foloowing LWC bundles as an Example

HTML File

<template>
    <div>
        <div>Name: {name}</div>
        <div>Description: {description}</div>
        <lightning-badge label={material}></lightning-badge>
        <lightning-badge label={category}></lightning-badge>
        <div>Price: {price}</div>
        <div><img src={pictureUrl}/></div>
    </div>
</template>

Javascript File

import { LightningElement } from 'lwc';
export default class BikeCard extends LightningElement {
   name = 'Electra X4';
   description = 'A sweet bike built for comfort.';
   category = 'Mountain';
   material = 'Steel';
   price = '$2,700';
   pictureUrl = 'https://s3-us-west-1.amazonaws.com/sfdc-demo/ebikes/electrax4.jpg';
 }

XML File

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <!-- The apiVersion may need to be increased for the current release -->
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__RecordPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Now We will deploy into the Dev Org

👉

Once you will deploy will end up with following

👉

The configuration file with the extension .js-meta.xml. 

This file provides metadata for Salesforce, including the design configuration for components 

intended for use in Lightning App Builder.

Reference: Trailhead Salesforce