Start tracking your progress
Trailhead Home
Trailhead Home

Analyze Your Code and Deploy It to Your Org

You’ve installed the tools we recommend for developing Lightning Web Components. And you copied and pasted some broken code, which we know would result in a failed deployment. You’d probably say you’ve never done this in real life before, right?

Did you know you can learn from an expert? Watch this video to find out more about the topics in this project:

Fixing JavaScript Errors

The most important task as a developer, after searching on the web for—hopefully working—code, is to write working code yourself. Let’s fix the errors that we introduced before, starting with the JavaScript file.

  1. Open Visual Studio Code.
  2. Click myFirstWebComponent.js.
  3. Hover over the red-underlined word track. This brings up the error messages related to this specific error:
    Hover window with error messages: “Decorators transform is necessary” and “‘track’ is not defined.’”
  4. Click the Problems tab to show all the errors that appear in the files you have opened currently. You should see something like this:
    Problems tab in Visual Studio Code with multiple errors displayed

Both the current file, as well as the Problems tab, show you errors detected in your code.

The first error message indicates that it’s the result of a requirement of the Lightning Web Components engine. Such errors are prepended with [lwc]. If you look closely at the code, you see in the first line that we’re importing LightningElement from the lwc engine, but we’re not importing track. Let’s fix that:

  1. Click right after the word LightningElement (within the curly braces).
  2. Enter track, and don’t forget to separate the two words with a comma. Your code should look like this:
    import { LightningElement, track } from 'lwc';
  3. Press CMD + S on macOS, or CTRL + S on Windows or Linux, to save the file.

Both errors, and the red lines, go away.

Note

Note

The IDE validates the contents of a file as you type by default. You can set this as a preference within Visual Studio Code to either validate as you type, or after you save a file.

But wait, why did both errors disappear? And why was the other error message prepended with [eslint]?

The Lightning Web Components extension ships by default with ESLint. ESLint is a widely used linting tool that evaluates code for errors, coding best practices, and more. Salesforce provides specific ESLint rules out of the box for you as a Lightning Web Component developer so that you can write great code. And if you make a mistake, the linting rules help you see it before you deploy your code. Isn’t that great?

The above error message indicated [no-undef]. That error message means that you defined a property, in this case the decorator track, but didn't declare it before. This is one of many super helpful linting rules that help you keep your code clean and maintainable.

Do you remember the .eslintrc file that was added automatically to the lwc metadata folder? That’s the configuration file, which defines the Salesforce-specific linting rules:

{
   "extends": "plugin:@salesforce/eslint-config-lwc/recommended"
}

Salesforce provides different rulesets, including base, recommended, and extended. Because these linting rules are specific to a project, you can use different rulesets for different projects.

Note

Note

When you deploy Lightning web components, Salesforce automatically validates your code against the @salesforce/eslint-config-lwc/base linting rule. Keep that in mind if you reconfigure the linting rules yourself.

If you want to read more about ESLint or the Salesforce-provided linting rules, check out the GitHub repository.

Now that we have a working JavaScript file, let’s fix the HTML markup in your web component template.

Fixing HTML Template Errors

Now that you’ve fixed the errors in the JavaScript file, you’ll learn how to use the intellisense feature of Visual Studio Code in tandem with the Salesforce Lightning Web Components extension.

  1. Open myFirstWebComponent.html in Visual Studio Code.
  2. Place the cursor into the empty curly braces of the red-underlined for:each attribute.
  3. Press CTRL + Space. You’ll see the intellisense dropdown.
    HTML markup with intellisense window
  4. Press Enter.
  5. Next, add this attribute to the red-marked div tag:
    key={contact.Id}
  6. Press CMD + S on macOS, or CTRL + S on Windows or Linux, to save the file.

Your code should look like this:

<lightning-card title="ContactInformation" icon-name="custom:custom14">
   <div class="slds-m-around_medium">
      <template for:each={contacts} for:item="contact">
         <div key={contact.Id}>
            {contact.Name}, {contact.Title}
         </div>
      </template>
   </div>
</lightning-card>

You saw two things while fixing the code.

First, intellisense on expressions within the HTML markup. The Lightning Web Components extension provides intellisense, which means that if you add other properties or functions to your JavaScript file, they will be automatically available for you within the template file. That‘s a huge time saver!

Second, you experienced the on-the-fly validation of code, or in this case markup. It’s the same as in the JavaScript file. If you are, for example, missing a required attribute, the IDE will tell you.

You also get intellisense on all base Lightning components within your template file. When you start typing <lightning, you get a list like this.

Base Lightning component intellisense window, showing a list of base Lightning components.

And when you hover the cursor over existing markup, the extension provides you with rich information about the selected base component.

Base Lightning component documentation

Deploy and Configure Your New Lightning Web Component

Now that all of our code is fixed, it’s time to push your local metadata to your scratch org.

  1. Open Visual Studio Code.
  2. Press Command + Shift + P on macOS or Ctrl + Shift + P on Windows or Linux, then type focus terminal. Press Enter.
  3. Enter this command to deploy the metadata to your org:
    sfdx force:source:push
  4. Press Enter.

After your metadata is pushed successfully to your scratch org, you can add the component to the Account record layout.

Note

Note

You can also develop Lightning web components against non-scratch orgs using the force:source:deploy command. Learn more about source-driven development in the Innovate Faster with Salesforce Environments and Salesforce DX unit of the Salesforce CRM Customization and Extension module.

As we’re already in Visual Studio Code, we can leverage another feature of Salesforce CLI.

  1. Go to the Visual Studio Code terminal.
  2. Enter the following command, and press Enter. This will open the default scratch org..
    sfdx force:org:open

Now let’s configure the Accounts object layout.

  1. Click the App Launcher icon ( App Launcher icon) and select Sales.
  2. Click the Accounts tab, then click New to create an account. Enter Component Developers as Account Name, then click Save.
  3. Click the gear icon ( Setup Gear), then select Edit Page to open Lightning App Builder.
  4. Drag the myFirstWebComponent component onto the page.
  5. Click Save, then click Activate.
  6. Click Assign as Org Default, then click Save.
  7. Click Back to return to the Account record.

That’s it! This project showed you how to install and use the recommended developer tools for developing Lightning Web Components. And you learned how to copy and paste code with errors (which you should avoid in the future).

Click Validate Step to earn your badge. Then check out the Trailhead Sample Gallery and the Lightning Web Component Recipes to see further examples and help you learn by code how to develop great Lightning web components.