Create Component In LWC and display in salesforce page

| By Webner

Following are the steps to create component in LWC and display in salesforce page:

  1. Create Default Search org from VS code.

  2. Authorize an Org.

  3. Create Lightning web component.

  4. After creating the lightning web component it will show the component under the LWC folder as shown in the image below(I have created myfirstcomponent named component)

  5. Change myfirstcomponent.js-meta file( metafile) update with the following code:
    <?xml version="1.0" encoding="UTF-8"?>
    <LightningComponentBundle xmlns="">
  6. Push source to deploy code
    Component in LWC vs-code5

  7. Login to salesforce org and go to app launcher and sales as shown in the below image:
    Component in LWC sf-setup

  8. On the sales page right corner click on the settings button and click edit page.
    Component in LWC sf-setup1

  9. The following screen will display and search components in the search bar(where number 1 is written) and in the custom component(where number 2 is written), you will see your component you can drag it to wherever you want to(where number 3 is written ) and click the save button to save the layout.
    Component in LWC sf-setup2

  10. After that click on the activation link and activate the updated layout by assigning an org and clicking save.

Whatever you have done in component it will show to the homepage screen like my component is displaying the following

Leave a Reply

Your email address will not be published. Required fields are marked *