Local Development For Lightning Web Components

Share on facebook
Share on twitter
Share on linkedin
Using Lightning Web Component Local Development Server, we can build component modules and view our changes live without publishing our components to an org.

Definition 

Using Lightning Web Component Local Development Server, we can build component modules and view our changes live without publishing our components to an org.  

Prerequisites 

  • Developer Hub-enabled org 
  • Local Development Server 
  • Salesforce CLI installed VS code 

Enable Dev Hub  

  • Login as System Administrator to developer edition or production or business org 
  •  Setup  –>  enter Dev Hub  –> select Dev Hub  Click enable 
  • Once it is enabled it cannot be disabled 

Local Development Server Installation 

         Steps 

  • To install the Local Development Server, we need to run the following command in a new terminal window 

Sfdx plugins: Install @salesforce/lwc-dev-server  

  • We need to check whether there is an  update for Local Development Server. If exists, then run the following commands 

Sfdx plugins: Update  

  • Navigate to SFDX project ,or clone one that has Lightning Web Components 

git clone git@github.com: trailheadapps/componentname.git  

  • If not in the lwc-sample root directory already, cd into it 

cd componentname  

  • Add the .localdevserver folder in SFDX project to .gitignore file. This folder contains the local development configuration. Do not modify any files. 
  • Enter the command to open a Dev Hub login window in the browser 

Sfdx force: auth: web: login  -d -a myhuborg  

  • To create a scratch org, run this command  from the command line

Sfdx force: org: create -s   -f   config/project -scratch-def.json  -a  “LWC”  

  • Push the code to the scratch org 

source: push  

  • Start the server 

Lightning: lwc: start  

  • View the server at http://localhost:3333/. 

Access Local Development Server from VS Code 

 We can access the local development server’s SFDX commands from VS code by pressing Ctrl + Shift + P. Enter as local development  

 To preview Lightning web Components, right click any line of code in the component’s HTML,CSS or JS files            

We can also right click any of the HTML,CSS or JS filenames or the component folder  

Preview of the component in the local development server 

About MST

At MST Solutions our cornerstone is to adapt, engage and create solutions which guarantee the success of our clients. The talent of our team and experiences in varied business verticals gives us an advantage over other competitors.

Recent Articles

Mobile Responsive Testing

Mobile Responsive Testing is simply a Testing Process performed to make sure that your website or an app is working appropriately on all types of devices.
Whether it an app or website, they need to ensure that they are accessible from any device, anytime, anywhere.

Read Article »

Work with us.

Our people aren’t just employees, they are key to the success of our business. We recognize the strengths of each individual and allow them time and resources to further develop those skills, crafting a culture of leaders who are passionate about where they are going within our organization.