Set Up the Development Environment

Learning Objectives

After completing this unit, you’ll be able to:

List the development tools needed to customize Salesforce Commerce.
Explain why Salesforce Developer Experience (SFDX) is the best choice for this implementation’s development platform.
List what’s included with the Salesforce plugins for Visual Studio (VS) Code.
Explain what the SFDX Command Line Interface (CLI) is for.
Describe the purpose of Dev Hub

Get Ready to Develop

We recommend using Lightning Web Components over Visualforce to build custom functionality. Lightning web components are lightweight and deliver exceptional performance for your apps and sites. Learn more about why you should use Lightning Web Components instead of Visualforce.

Lightning Platform provides various ways for advanced administrators and developers to build custom functionality, and it supports newer, complex business processes that aren’t available with Visualforce.

Wei Leung, Ursa Major Solar developer, is ready to customize her Salesforce Commerce integrations. But first, she wants to identify the development tools she needs and the specific steps to customize an integration. “The better the plan, the better the implementation,” is one of her mottos.

From her previous Salesforce Commerce implementation, she knows that the Salesforce Developer Experience (SFDX) is her best choice for a development platform because Salesforce DX:

Provides easy access to Salesforce extensions and GitHub repositories containing LWC templates and reference packages.
Integrates with Salesforce Command Line Interface (CLI), the VS Code editor with the Salesforce Extension Pack, and a B2C plugin to quickly deploy packages and components to scratch orgs and stores.
Streamlines the entire development lifecycle. It improves team development and collaboration, facilitates automated testing and continuous integration, and makes the release cycle more efficient and agile.

Salesforce DX is the right choice for Wei to build her tax, shipping, and payment integration packages with Lightning Web Components (LWC).

Making checklists is a common practice at Ursa Major Solar, and Wei is a big fan. Here’s her checklist for setting up her development environment.

Step	Task
1	Install the VS Code editor.
2	Get the Salesforce plugins for VS Code.
3	Install the SFDX CLI.
4	Install the SFDX Commerce plugins.

Install the VS Code Editor

The first step Wei takes is to install the VS Code editor, which provides an ideal development environment for creating, compiling, displaying, and debugging Salesforce Lightning web components and Salesforce Commerce integration packages.

This free editor is open source and optimized for cloud and web coding. The project folder combines, compiles, and displays the output of the HTML, JavaScript, and CSS files for your component.

Follow the steps in this Trailhead module to install the VS Code editor: Quick Start: Visual Studio Code for Salesforce Development.

Get the Salesforce Plugins for VS Code

The VS Code editor provides access to Salesforce plugins that support creating integration packages and custom Salesforce Commerce components. The extensions include features for working with development orgs (scratch orgs, sandboxes, and DE orgs), LWCs, and Visualforce.

The plugin, called an extension pack, includes the following.

Salesforce SFDX CLI integration for VS Code
ESLint JavaScript integration for VS Code
LWC for VS Code: LWC uses the VS Code HTML server to provide code editing features for the LWC program model, including syntax highlighting, code completion, and file outlining

A Developer Edition (DE) org is an org that Salesforce provides for free to test new features and implementations in Salesforce without affecting a production org.

You already installed these extensions in the Quick Start: Visual Studio Code for Salesforce Development Trailhead module. For more information on plugins, see the Salesforce Extensions for VS Code overview.

Install the Salesforce DX CLI

The Salesforce DX (SFDX) CLI lets Wei synchronize source code between her Salesforce orgs and her version control system.

Salesforce CLI works best within the native Windows command prompt (cmd.exe) and the Microsoft PowerShell. We don’t recommend using Salesforce CLI with a Linux terminal emulator, such as Windows 10 Subsystem for Linux, Cygwin, or MinGW, because support for bugs is limited.

Follow the steps in this Trailhead module to install the Salesforce DX CLI: Command-Line Interface

Install the SFDX Commerce D2C Plugin

The SFDX Commerce plugin helps you perform various Salesforce Commerce development tasks. Use it to set up and deploy integration packages to scratch environments for testing or to an org.

Wei configures a JSON file that defines store parameters. Then she uses the CLI to create and authorize a Dev Hub, stand up a store or sandbox, deploy an integration package, import product data, and more. Here’s how she installs the plugins.

Open the VS Code editor.
Open a terminal.
Enter sfdx plugins:install @salesforce/commerce.

Both SFDX and Commerce plugins update automatically.

Install a local development server if you want to test components without having to deploy them to an org. See the Salesforce developer documentation for details.

Enable the Dev Hub

The Dev Hub org determines where scratch orgs are authorized for Wei’s package project.

Next, we show you the steps to enable the Dev Hub in an org. We don’t have any hands-on challenges in this module, but if you want to follow along and try out the steps, here’s how to launch your Trailhead Playground.

First, make sure you’re logged in to Trailhead. Then click your user avatar in the upper-right corner of this page and select Hands-on Orgs from the dropdown. Click Launch next to the org you want to open. Or, if you want to create a playground, click Create Playground.

Here’s how to enable the Dev Hub.

Open your org.
Log in as the administrator.
Click the setup icon and select Setup.
In the Quick Find box, enter DevHub and select DevHub.
If you don't see DevHub in the Setup menu, make sure that your org is one of the supported editions.
To enable Dev Hub, click Enable.

When you enable Dev Hub, you can’t disable it.

Next Steps

In this module, you explored the development tools you use to customize Salesforce Commerce and learned why SFDX is the best choice for this implementation’s development platform. Next, learn how to create a Salesforce Commerce payments package and create custom display components.