Saturday 15 December 2018

Lightning Web Components ( LWC ) in Salesforce with Non-Scratch Org


Lightning Web Components are announced as part of Spring19 pre-release. Welcome in Lightning Web Components Worlds. In this post we will talk about what is Lightning web component (LWC), why lightning web component and how to very first lightning web component.

What is Lightning Web Component :-

Lightning Web Components is a new framework for building Lightning components. For Lightning Web Components development you need to setup SalesforceDX and VsCode as Lightning web component are currently not available in Developer console. If you want to know more about lightning web component please check our webinar recording of "Introduction to Lightning Web Components". In ApexHours Session we covered all below topic :-
  1. Why Lightning Web Component (LWC)
  2. Part 1 – Vanilla HTML5 Web Components
    • Benefits of Web Component
    • Pillars of Web Component
    • Demo of Custom Element and Templating 
  3. Part 2 – Lightning Web Component
    • Hello World
    • Demo of Lifecycle methods
    • Call Apex Class
    • Access Custom Label
    • Lightning Data Services
    • Communication between Lightning Component and LWC
 Here is recording of session:-

Let see how to create very First Lightning Web Component.


Step 1) Setup SalesforceDX with VSCode.

  1. Download and Setup Salesforce CLI.
  2. Download and Install Salesforce VsCode.
  3. Install required Extension 
    1. Salesforce Extension Pack 
    2. Salesforce Lightning Web Components Salesforce Extension Pack

Step 2) Create SalesforceDx Project

1) Create Project:  
In our last post we talk about how to use SalesforceDx with non-scratch org. We will use same approch here. Press "CTRL+SHIFT+P" then select  "SFDX:Create Project with Manifest"
Then enter project and select folder.

2) Authorize your org :
Press "CTRL+SHIFT+P" then select  "SFDX: Authorize an Org"

Step 3) Finally Create your first Lightning Web Component

  • Press CTRL+SHIF+P then Type Web Component and then select "SFDX: Create Lightning Web Component"
  • Then Select Folder where you want to save your LWC component
  • Then provide Component Name.
  • Verify your components under lwc folder.
LWC Folder

Step 4) Lets do some coding

Lets create one very simple lightning component with HelloWorld :)

    <lightning-card title="HelloWorld" icon-name="custom:custom14">
        <div class="slds-m-around_medium">
            <p>Hello, {greeting}!</p>
            <lightning-input label="Name" value={greeting} onchange={changeHandler}></lightning-input>

import { LightningElement, track } from 'lwc';
export default class HelloWorld extends LightningElement {
    @track greeting = 'World';
    changeHandler(event) {
        this.greeting =;

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="" fqn="helloWorld">

Step 5) Deploy your component in Org.

Once you are done with coding. Select LWC folder and right click on same then from menu select "SFDX: Deploy Source to Org".

SFDX: Deploy Source to Org

Step 6) Verify your Changes with App Builder.

Open your app builder and add your Custom Component on page/App

app builder

Here is your first Lightning Web Component.

HelloWorld LWC components

NOTE:- Make sure Domain is enable in your Org. Else Custom Component will not visible in app builder.

I just record all this step in on Recording and posted same YouTube. Here is recording.

We also did one session on LWC best Practice with "René Winkelmeyer". Please check this recording to learn more about Lwc.

Please check below post on Lightning Web Components:-
Further Reading:

Check our YouTube Channel for more recording in Lightning Web Components.

Amit Chaudhary


  1. HI amith,
    I created one sample lightning web component and deploy to my org this component is showing in below screenshot
    but it's not showing in lightning app builder i already emaple domian
    Can your please help me on this.

  2. You need to update your xml file


  3. Hi Amith,

    This helloworld custom component is not visible in lightning app builder. I have also enabled My domain in my org.
    Can your please help me on this.

    1. Please this recording

  4. Did you added isExposed = true in your meta.xml file ? And add target tag with lightning__AppPage

  5. Hey Amit,I need your urgent help,in which metadata LWC comes under?So for Aura we have AuraDefinitionBundle,but am not sure about LWC,not able to see LWC Component in AuraDefinitionBundle.

  6. Hey Amit I got to know that Metadata,I have another doubt,when am trying to open VScode through Mavensmate not able to see vscode folder in Vscode Application.

    1. I will recommend you to use VsCode with SFDX

  7. This comment has been removed by the author.

  8. Hi Amit,

    How to lightning web component in the custom button or action.

  9. Hi Amit,

    I am able to create LWC in using scratch org and non-scrath org both after 'Dev Hub' is now available in Dev Edition sandbox.

    Still i am in confusion here.
    1. I am working in my 'Dev Edition sandbox' and i am creating my apex classes from there and aura components as well. And that is not using DX. i am using VS Code. [The project is open in VS Code]

    2. Now i want to build Web component in same project. Now how to do that. Because, folder structure of Dx project is differ. And project i am currently working is differ.

  10. hello sir !
    good evening !!
    How to create looup in lightning web components?? please helpo me put

  11. Hi Amit,

    Can you please help me Lightning Web Component for Close Case button.


  12. Hello amit
    i am huge fan of your blog, i need a small help on lwc
    My requirement is that i am working on a real estate project,
    i have two objects, (opportunity) and custom object (Appartment__c), whenever a block a flat in a opportunity object, the same blocked flat should show in appartment objects, i have created UI for the button components, and i have put that lightning component in both objects, how can i achive this?

    if you want i share me UI code

    1. Please reply me back when you are free at

  13. Hi Amit,

    I'm not able to deploy the component to the Org. In my VSC I'm not getting the option to perform this. Rest all I did and it works fine. Is there anything that I need to install in the VSC in order to push the changes to source org?

  14. Hi Amit,

    I'm not able to deploy the component to the Org. In my VSC I'm not getting the option to perform this. Rest all I did and it works fine. Is there anything that I need to install in the VSC in order to push the changes to source org?

    1. I hope you installed the Salesforce CLI

  15. Hey! great post you shared. It was amazing to read whole new update also want to add more about custom lables here for you. It is good to know about new things.

  16. Hi Amit,

    I am not able to find css option of any LWC in vscode tool.
    Could you please help me on this ?

    1. Please check below post/ Recording

  17. Share some artile related to Navigation page to page and different types

  18. Thanks Amit, for this awesome document. As new to salesforce, I was struggling alot to deploy my first app of org.

  19. Hi Amit, i am not getting 'SFDX:Deploy Source to org' option. Please help.

  20. IF any of you have Lightning Web Component expereience and interested to work with me please let me know.

  21. Is it possible create chatter functionality in the LWC or access chatter in LWC?

  22. Thanks a lot Amits, very good tutorial.

    1. Glad it helped you. Check this post for recording

  23. Hi Amit,

    Can we create Bulk Object Creation using CSV file in Sales Force ?

  24. Hi Amit,

    Can we create Dynamic Form Builder in LWC ?

  25. Hi Amith,

    I have below doubts could you please clarify them.

    • In lightning Web Component, can we create custom object using visual studio code.
    • Suppose I have created one component for employee data table and displaying the records and when I click on name-hyperlink record does it navigate to Record page?

  26. Hi Amit,

    Its showing me error:
    "Lightning_AppPage is not a valid target" while pushing the changes to scratch org.

    1. I think you need to add double Underscore between Lightning and AppPage. so it will be like Lightning__AppPage

  27. This comment has been removed by the author.

  28. Hello,
    I have created a LWC and it is also visible in app builder but when i add that component to home page it is not getting saved. And i have also done all configurations also like,


  29. Link exchange is nothing else but it is only placing the other person's web site link on your page at proper place and other person will also do similar in favor of you.

  30. I every time emailed this web site post page to all my associates, since if like to read it afterward my contacts will too.

  31. Hello sir

    CSS class selector 'slds-m-around_medium' not found.

    Details Error
    "resource": "/f:/LWC/HelloWorld/force-app/main/default/lwc/helloWorld/helloWorld.html",
    "owner": "_generated_diagnostic_collection_name_#0",
    "severity": 4,
    "message": "CSS class selector 'slds-m-around_medium' not found.",
    "startLineNumber": 3,
    "startColumn": 19,
    "endLineNumber": 3,
    "endColumn": 39

    Please Reply