Steps to work Salesforce Lightning Web components(LWC) with Scratch Org

Though all details to create LWC with scratch Org are mentioned in trailhead(LWC with Scratch Org ), still I faced difficulty in locating those, once I’ve completed above trailhead. Moreever, details are not that much emphasized.

For benefits of everyone- I’m providing  high level steps below. For more details, please visit trailhead links as mentioned in this post.

    1. Ideally start with new project (CTRL+SHIFT +P) in VSCode. Choose Empty new Folder to create it.
      • Once created, Ensure that project has all necessary folders like (.sfdx, force-app, .vscode etc)
    2. Once project got created,  click again CTRL+SHIFT+P and create Lightning web component using command sfdx :create lightning web component.
    3. Give proper name to the component. I’m following this example:(productCardDemo), so, i’ve given the name as productCard. Ensure that productCard.html and productCard.js are properly created.

Create productcard.html with following code.

<template>
    <div>
      Name: {name}
      Description: {description}
      Category: {category}
      Material: {material}
      Price: {price}
   <div>
</template>

Create productcard.js with following code.

import { LightningElement } from ‘lwc’;
export default class App 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’;
}

  1. Next run command- SFDX: Authorize a Dev Hub in VSCode  or
    sfdx force:auth:web:login -d -a myhuborg , in Terminal

    Please note, authorizing DevHub is an essential part, before create new scratch Org.Here we have given alias to DevHub as myhuborg.

  2. Click CTRL+SHIFT+P, run command- SFDX: Create a Default Scratch Org
    • Press Enter to accept the default project-scratch-def.json.
    • Press Enter to accept the default trailhead scratch org alias.
    • Press Enter to accept the default 7 days scratch org duration.
  3. Or you can write following command in terminal to create scratch Org :sfdx force:org:create -s -f config/project-scratch-def.json -a trailhead
  4. Click CTRL+SHIFT+P, type ‘focus terminal’ to open new terminal window.
  5. Type – sfdx force:source:push to push newly created components into your scratch org
  6. Type in the terminal window:sfdx force:org:open, to open your scratch org.
  7. search lightning components in the setup menu to verify, if newly created lightning web component(productCard) is present or not.
  8. To use it. create new lightning app page. for that open lightning app builder from set up menu:
    • Create App page, when prompted
    • Give label as ProductCard.
    • Select ‘One Region’ as standard template
    • Now lightning App Builder, will get opened. Scroll down and add productCard Lightning web component to your app from left menu.
    • Click SAVE on top right and Activate your App.
    • Choose default option in ‘Page Settings’ tab. Ensure you add this new page in one the app for e.g Sales/ Service  in ‘Lightning Experience‘ tab as shown below:
      • Image1
  9. Click Save and visit ‘Sales’ or ‘Service’ app to see the Lightning component created.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

<span>%d</span> bloggers like this: