Set up LWC Development Environment

Creating LWC component in developer console is not possible. So we need to setup local development environment for it. In order to setup local development environment, we need to follow below steps:

  • Install Salesforce CLI.
  • Install IDE(Integrated Development Enviornment) such as VS Code.
Step 1:-  Install Salesforce CLI: The Salesforce CLI is a powerful command line interface that simplifies development and build automation when working with your Salesforce org. Visit below link to download Salesforce CLI for your operating system:

If you have already Salesforce CLI installed in your system, you can update its version using below command:

sfdx update

To check the version of installed CLI, use below command:

sfdx --version

Step 2:- Install an IDE: An integrated development environment (IDE) is software for developing applications that combine common developer tools into a single graphical user interface (GUI). An IDE typically consists of the following:

  •  Source code editor
  •  Debugger
  •  Local build automation 
You can use any IDE but I would like to prefer to use Visual Studio Code (VS Code). In order to install VS Code IDE, visit below link to download:

Install the Salesforce Extension Pack: Once you installed the VS Code IDE, its time to install the Salesforce Extension Pack. The extension pack installs the essential Salesforce extensions all at once, so we need not to install these extensions each one individually. Follow below steps to install the Salesforce Extension Pack:
  • Launch VS Code IDE
  • From the left toolbar, click on "Extensions" icon.
  • Enter Salesforce Extension Pack in search field. You will see results as per attached screenshot.
  • Click on the 1st result that appear with title "Salesforce Extension Pack" and then click on Install button.
  • Once installation of "Salesforce Extension Pack" finished, you need not to restart your VS Code. You can continue to use the current session. 
  • You can also install "Prettier" extension for formating the code automatically. Its optional step.

Set Up a Development Org

In order to follow sfdx approx of creating lightning web components, we need to setup a Development org. In Order to setup the Development org, visit below URL and sign up for developer edition org:

Once sign up completed, login into the developer org and do the following
  1. Enable or register "My Domain".
  2. Enable "Dev Hub".

Enable or Register My Domain

To create Lightning web components in an org, first, we need to set up a My Domain name, which is a subdomain within the salesforce.com domain. Follow below steps to enable Dev Hub:
  1. Click The Setup gear icon. and select Setup.
  2. From Setup, enter "My Domain" in the Quick Find box and select My Domain.
  3. Enter any domain name that you want and click on "Check Availability" button. If domain name is available, click on "Register Domain" button.

Enable Dev Hub

A Dev Hub provides you the ability to create and manage scratch orgs. Follow below steps to enable Dev Hub:
  1. Click The Setup gear icon. and select Setup.
  2. From Setup, enter "Dev Hub" in the Quick Find box and select Dev Hub.
  3. To enable Dev Hub, click Enable.
Note: Once you enable "Dev Hub" in your org, you can not disable it.

Create a Salesforce SFDX Project

We will use command pellete of Visual Studio Code to create a project. Follow below steps to create Salesforce SFDX Project:
  • Open Visual Studio Code.
  • Press Command + Shift + P on macOS or Ctrl + Shift + P on Windows/Linux, then type "create project". Select "SFDX: Create Project" and press Enter.
  • Enter any project name such as 'LWC', and press Enter.
  • Choose a directory on your local system where the project files will be stored. Click Create Project.

Authorize Dev Hub Org

We need to authorize our Dev Hub Org(that we created using above mentioned steps) so that we can create scratch org for LWC development. Follow below steps to authorize your Dev Hub Org:
  • Open Visual Studio Code.
  • Press Command + Shift + P on macOS or Ctrl + Shift + P on Windows/Linux, then type "authorize a Dev Hub". Select "SFDX: Authorize a Dev Hub" and press Enter. It will redirect on Salesforce login screen. 
  • Login with your Dev Hub Org(Developer Org that we created using the above steps) credentials.
  • Once you login successfully, it will ask you to Allow or Deny access. Click on "Allow".
  • Once you allowed access, you will see a success message in terminal of VS Code as per attached screenshot. CLI will remember your Dev Hub credentials.

Create a Scratch Org

Once you successfully authorize your Dev Hub Org, it's time to create a scratch org. Scratch orgs are temporary Salesforce environments where you do most of your development work. Scratch orgs are meant to be disposable. You can set the lifecycle of a Scratch Org between 1 to 30 days.

Note: If you want sample data such as Accounts, Opportunities etc in your scratch org, open your config/project-scratch-def.json file and add below attributes in this JSON file: "hasSampleData": "true".
  • Open Visual Studio Code.
  • Press Command + Shift + P on macOS or Ctrl + Shift + P on Windows/Linux, then type "create scratch". Select "SFDX: Create a Default Scratch Org…" and press Enter.
  • Press Enter to accept the default project-scratch-def.json.
  • Enter any alias name that you want to provide your scratch org as alias. If you don't want to provide any alias, just hit Enter to keep default alias name for scratch org.
  • Enter any number between 1 to 30 as duration for your scratch org. If you don't want to specify duration for scratch org, just hit Enter to accept the default 7 days scratch org duration.
  • Creating a scratch org can take some time so be patient. Once scratch org created successfully, you will see a success message with scratch org ID in your VS Code terminal. 

Create a Lightning Web Component

  • Open Visual Studio Code.
  • Press Command + Shift + P on macOS or Ctrl + Shift + P on Windows/Linux, then type "create lightning". Select "SFDX: Create Lightning Web Component" and press Enter.
  • Enter the component name in camelcase notation and press Enter.
  • Select the desired directory and press Enter.
Once you performed above steps, a new lightning web component will be created under force-app/main/default/lwc with three files(.HTML, .JS, .XML). JS and XML file are required files of an component. We can not create a component without these two files. We can create a component without HTML file as its not required file.

 

Comments

Post a Comment

Popular posts from this blog

Difference between var, let and const keyword in JavaScript

 In JavaScript, We can declare a variable using below keywords: var let const Below are the difference between these keywords: Scope: The scope of the "var" keyword is the global scope. Means variables defined outside the function can be accessed globally. <script>     var a = 20;     function fun() {         if (true) {              var b = 30 // declared in "if" block but can be accessible outside of this "if" block.         }         console.log(b);         console.log(a);     }     fun(); </script> Output:  30 20 The scope of a "let" variable is only block scoped. It can’t be accessible outside the particular block. Have a look at below example: <script>     let a = 20;     function fun() {           if (true) {          ...
Read more

Salesforce Record Id

 Record Id is used to identify the record uniquely in a Salesforce Org. There are 2 types of record Id in Salesforce: 15 digit 18 digit 15-digit record Id is case-sensitive where as 18-digit record Id is case-insensitive .  15-digit record Id is referenced in UI and also visible in browser. It is true in classic but in lightning 18 digit record Id is being used in UI and also visible in browser. 18-digit record Id is referenced through the API. The last 3 digit of the 18-digit record Id is a check sum of the capitalization of the first 15 characters. A 15-digit record Id can be converted into 18-digit record Id using CASESAFEID() function. To convert 18-digit record Id into 15-digit record Id, simply remove last 3 digits from 18-digit record Id. Why we need 18-digit record Id when there was 15-digit record Id: Apex is a case-insensitive language. As 15 digit record Id is case-sensitive therefore we can not use it directly in Apex code. Therefore earlier in classic we were con...
Read more

Salesforce External ID

 An External Id is a custom field that has "External Id" attribute checked. Its used to contain unique record identifiers from a system outside of Salesforce. Salesforce allows us to mark only custom field with data type Text , Number or Email as External Id. Note: External Id is not case-sensitive.  Considerations: External Id is an attribute that can be added to a custom field to indicate that it should be indexed and treated as an Id. Its a user-defined cross-referenced field. It can be created for custom field type(Text, Number and Email only). Each object can have up to 25 External Ids. Benefits:  It helps improve report and API SOQL performance.  It can be used with UPSERT DML operation to seamlessly integrate apps with other system. No need to know Salesforce Record Id to load data. Very convenient for data integrations and migrations. The import wizard will detect existing records in Salesforce that have the same External Id. It becomes searchable in the s...
Read more