---
schema_version: "1"
id: ffcb30e250c9b25d45865da529fe7d1e9b1e56c24e9dc20160e5d7e528ef4aa5
title: LWC Development Quick Start
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/salesforcedx/codebuilder/guides/files/develop/lwc/codebuilder-lwc-get-started.md
canonical_url: https://developer.salesforce.com/docs/platform/code-builder/guide/codebuilder-lwc-get-started.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: b55aa63ce367ab101df8a0cbc41530621b3a92928c5bf04e4dc4247b30f579d9
products:
  - Agentforce Vibes IDE
  - salesforcedx
---
# LWC Development Quick Start

Create a Lightning web component called `contactList` that displays contact names and phone numbers in your app. You get the contact information to display from an Apex class called `ContactController`.

## Add an Apex Class that Queries Contacts

1. In VS Code, run the command **SFDX: Create Project** from the Command Palette to create a Salesforce DX project if you don’t have one.
2. Run **SFDX: Open Default Org** to log into the org to which you want to add the LWC.
3. Run **SFDX: Refresh SObject Definitions**  to get completion suggestions for your SObjects related code.
4. Run **SFDX: Create Apex Class** and create a class called `ContactController`.

Next let's add a method called `getContacts` to this class. Make this method both public and static. Because it’s a static method, you don't need to create an instance of the class to access the method. You can use the name of the class followed by a dot (`.`) and the name of the method. This method queries a set of fields on the contact object. Paste this code into `ContactController.cls`:

```
public with sharing class ContactController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> getContacts() {
        return [
SELECT
Id,
Name,
Email,
Phone
FROM Contact
WITH SECURITY_ENFORCED
LIMIT 10
];
    }
}

```

Next, add the LWC component that displays the contact information.

## Create a Component to Display Contact Information

1. From the Command Palette, run **SFDX: Create Lightning Web Component** and create a component called `contactList` in the default location.
2. In the `contactList.html` file, cut and paste the following code, then save the file:

```
<template>
    <lightning-card title="Contact List">
        <template if:true={contacts.data}>
            <template for:each={contacts.data} for:item="contact">
                <div class="slds-var-p-horizontal_medium" key={contact.Id}>
                    <p>{contact.Name}, {contact.Phone}</p>
                </div>
            </template>
        </template>
        <template if:true={contacts.error}>
            <p>{contacts.error}</p>
        </template>
    </lightning-card>
</template>

```

3. In the `contactList.js` file, cut and paste this code and save:

```
import { LightningElement, wire } from 'lwc';
import getContacts from '@salesforce/apex/ContactController.getContacts';

export default class ContactList extends LightningElement {
    @wire(getContacts) contacts;
}
```

4. Cut and paste the following code in the `contactList.js-meta.xml` file and save:

```
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
 	<apiVersion>57.0</apiVersion>
 	<isExposed>true</isExposed>
 	<targets>

   		<target>lightning__HomePage</target>
 	</targets>
</LightningComponentBundle>

```

5. Right-click the default folder under `force-app/main` and run **SFDX: Deploy Source to Org** to deploy your code to the org.

## Add the New Component to Your App in Lightning Experience

1. In Visual Studio Code, open the Command Palette and run **SFDX: Open Default Org**.
   This command opens your org in a separate browser.
2. From the **App Launcher** find and select **Sales**.
3. Click **Setup** gear then select **Edit Page**.

:::Tip
If you don’t see **Edit Page**, click the **Setup** gear and open the setup page. In the search field at the top of the page, type "Home".
In the Home menu, toggle **Advanced Seller Home** off. Now, go back to your **Sales** app and reload it. Click the **Setup** gear icon again. This time, you’ll be able to select the **Edit Page** option. 
:::

4. Drag the `contactList` Lightning web component from the Custom area of the Lightning Components list to the top of the Page Canvas.
5. Click **Save**.
6. Click **Activate**.
7. Click **Assign as Org Default**.
8. Click **Save**.
9. Click **Save** again, then click **Back** arrow to return to the page.
10. To view your new component, refresh the page.

![PNG showing the LWC component](https://developer.salesforce.com/docs/platform/media/vscode/contact_lwc.png)