Tune in to Trailblazers Innovate for Salesforce product news,
demos, and latest roadmaps. Register here.
close
Start tracking your progress
Trailhead Home
Trailhead Home

Install Development Tools

Learning Objectives

In this project you will:

  • Install the recommended developer tools for creating and working with Lightning Web Components.
  • Create a Lightning web component.
  • Fix errors in your code using the provided developer tools.
  • Configure a record layout to display your Lightning web component.

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

You’ve learned about this brand-new programming model called Lightning Web Components, and now you want to start building your own web components. First, you need some tools. Just as you need a hammer to put nails into a wooden beam (unless you have super strength and can do that without a hammer), you need tools to write Lightning web components. 

While it’s true that you can create a Lightning web component with any text editor, you won’t get the comfort and support that a specialized set of tools provides. If you're an experienced Salesforce developer looking to incorporate Lightning web components into your apps, you'll be more successful if you incorporate some new tools into your toolchain. And if you're new to Salesforce development and looking to get started building Lightning web components, you'll want to get familiar with the right toolchain for working on Salesforce projects.

Because Lightning Web Components are based on modern web standards it’s only logical that the associated tooling is built on what are currently popular tools among web developers.

Salesforce CLI

Like many other programming languages and models, Salesforce includes a command-line interface (CLI). If you’ve ever used npm, yarn, gradle, or maven, Salesforce CLI will seem familiar to you—just tailor-made for Salesforce development tasks (and if those acronyms look like alphabet soup to you, that’s fine, too).

Salesforce CLI allows you to interact with your Salesforce environments in many ways, like retrieving or pushing code or interacting with data. The CLI consists of several plugins. These plugins provide important specific functionality. For example, the salesforcedx plugin provides the ability to interact with Salesforce orgs and their data.

If you already have Salesforce CLI installed, you can skip this section.

  1. Download Salesforce CLI using the appropriate link for your operating system:
    Operating System
    Link to Installer
    macOS
    https://sfdc.co/sfdx_cli_osx
    Windows 32-bit
    https://sfdc.co/sfdx_cli_win
    Windows 64-bit
    https://sfdc.co/sfdx_cli_win64
    Debian/Ubuntu 64
    https://sfdc.co/sfdx_cli_linux
    Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script.
    Debian/Ubuntu x86
    https://sfdc.co/sfdx_cli_linux_x86
    Download the archive from one of the URLs in the manifest, extract the archive, then run the ./install script.
  2. Run the downloaded installer.
  3. After the installation, open a command line prompt, such as cmd on Windows or Linux or Terminal on macOS.
  4. Run this command to confirm the correct installation:
    sfdx plugins --core
    You should see something like:

Terminal output of Salesforce CLI plugins.

The salesforcedx plugin should be listed as version 45.x.x or higher.

You’re all set with Salesforce CLI! That was easy, wasn’t it? Now on to the next tool in your toolbox as a new Lightning Web Components developer, the IDE.

Visual Studio Code

Visual Studio Code is the go-to code editor for Salesforce developers. It is free, open-source, and available for Windows, Linux, and macOS. Visual Studio Code is a well-established IDE among web developers. Now it’s also an effective IDE for building Lightning web components, and Salesforce provides free extensions for Visual Studio Code that simplify your development experience even more.

Follow these instructions to install Visual Studio Code. 

  1. Download and install the latest version of Visual Studio Code for your operating system. If you already have Visual Studio Code installed, there’s no need to reinstall it.
  2. Launch Visual Studio Code.
  3. Click the Extension selector in left Visual Studio Code sidebar icon for Extensions in the sidebar.
  4. Enter lightning web components in the search bar. This brings up the list of available extensions.
    List of Salesforce extensions within Visual Studio Code
  5. Click Install next to the Lightning Web Components extension.
  6. Press Command + Shift + P on macOS or Ctrl + Shift + P on Windows or Linux to reveal the  command palette. In the command palette, type sfdx to display an initial list of available commands.

Done! You’ve installed all the tools you need for developing your first Lightning web component.

We also provide the Salesforce Extension Pack. The extension pack provides great tooling for developing on the Lightning Platform, and includes tools for working with Apex, Visualforce, and even a Replay Debugger. 

Activate Developer Hub

For this project you use your Trailhead Playground as your Developer Hub, and create a Lightning web component in a scratch org. But first let’s explain what a Developer Hub and a scratch org are.

A scratch org is a dedicated, configurable, and short-term Salesforce environment that you can quickly spin up when starting a new project, a new feature branch, or a feature test.

A Developer Hub (Dev Hub) is the main Salesforce org that you and your team use to create and manage your scratch orgs.

Note

Note

After you enable Dev Hub in your org, you can’t disable it.

  1. Launch your Trailhead Playground.
  2. Click The Setup gear icon. and select Setup.
  3. From Setup, enter Dev Hub in the Quick Find box and select Dev Hub.
  4. To enable Dev Hub, click Enable.

That’s it. You’ve setup your Dev Hub with Lightning Web Components enabled, and you’ve downloaded, installed and configured the tools that you need. In the next step you use those tools to create your first Lightning web component.

We won’t check any of your setup. Click Verify Step to go to the next step.