Skip to main content

Salesforce

Set Up Your Salesforce DX Environment

The Salesforce Developer Experience (DX) is a set of tools that 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.

In this blog, we are going to see why and how to set up a Salesforce Environment on a local machine and learn to use it.

Why Do We Need the Salesforce DX Environment?

Before the invention of the Lightning Web Component, we were able to use the Developer Console to create Apex programming components like Trigger, VisualForce, and Lightning Pages. But Developer Console does not have functionality for creating Lightning Web Components. Along with this limitation, below are additional limitations of Developer Console:

  • Autocomplete is not available
  • Every time after saving, it hits the API request
  • Moving from one tab to another in the developer console is a bit difficult when you open more Apex classes, lightning components, etc.
  • LWC development is not possible on the Developer Console

Advantages of Salesforce DX

  • It helps improve team collaboration and development
  • It makes the release cycle process more agile and efficient
  • It allows developers to use any tool to modify the code such as CLI, VIM, Sublime, Atom, etc.
  • Facilitates automated testing for your code and enables continuous integration
  • Requires a local development setup for developers to get hands-on expertise

Components of Salesforce DX:

  • VS Code: Visual Studio Code is the go-to code editor for Salesforce developers. It’s free, open-source, and available for Windows, Linux, and macOS. This editor has easy-to-install extensions for syntax highlighting, code completion, and more.
  • Salesforce CLI (command-line interfaces): The Salesforce CLI is a powerful command-line interface that simplifies development and builds automation when working with your Salesforce org. Use it to aggregate all the tools you need to develop with and perform commands against your Salesforce org. Synchronize source to and from scratch orgs.
  • Extensions in VS Code: The features that Visual Studio Code includes out-of-the-box are just the start. VS Code extensions let you add languages, debuggers, and tools to your installation to support your development workflow. VS Code’s rich extensibility model lets extension authors plug directly into the VS Code UI and contribute functionality through the same APIs used by VS Code. The Salesforce Extension pack includes tools for developing on the Salesforce platform in the lightweight, extensible VS Code editor. These tools provide features for working with development orgs (scratch orgs, sandboxes, and DE orgs), Apex, Aura components, and Visualforce.

What We Are Going To Do

  1. Setup SFDX environment
  2. Setup VS Code environment
  3. Setup Salesforce DX with VS Code
  4. Authorization of org retrieve from org and deployment in org using VS Code

Setup SFDX Environment

Step 1: Install the CLI using the links below

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

Salesforce CLI

Step 2: Start installing for Windows

Step 2 Start Installing Windows

Step 3: Select path for install

Sdx 1

Step 4: Wait for install to complete

a)

Sdx 2

b)

Sdx 3

Step 5: Check the version and conform SFDX installation from CMD.

Use “sfdx –version” for version and “sfdx” for installation conformation. (Note: To open Command Prompt is to use search. Inside the search field from your taskbar, enter command or cmd. Then, click or tap on the Command Prompt result.)

a)

Sdx 4

b)

Sdx 5

Step 6: Input command “sfdx force –help” to become aware of different commands available in it with its use.

Sdx 6

Step 7: Confirm that you’ve installed ​sfdx plugins, using “sfdx plugins” command.

Sdx 7

Step 8: If sfdx plugins are not installed, run the following command: ”sfdx plugins:install salesforcedx@pre-release”.

Sdx 8

Step 9: Again, verify using the following command: ”sfdx plugins”.

Sdx 9

In this way, we can complete the installation of SFDX in a Windows environment. Now, let’s setup the VS code.

Setup VS Code Environment

If VS Code is already installed on your machine, then you can ignore these steps or follow the following steps.

Step 1: Download & install VS Code setup from the following URL: https://code.visualstudio.com

Sdx 10

Step 2: Installation of VS Code

a)

Sdx 11

b)

Sdx 12

c)

Sdx 13

d)

Sdx 14

e)

Sdx 15

f)

Sdx 16

g)

Sdx 17

h)

Sdx 18

i)

Sdx 19

In this way, we can install VS Code on your system.

Setup Salesforce DX with VS Code

Step 1: To setup Saleforce in VS Code, first install “Salesforce Extension Pack”.

Sdx 20

Step 2: To go for a Lightning Web Component in VS Code, first you need to install “Lightning Web Components”.

Sdx 21

These are the steps required to set up and configure Salesforce DX on your system.

Create a Salesforce DX Project via Command Palette

  • In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS
  • Type SFDX
  • Select SFDX: Create Project
  • Enter HelloWorldLightningWebComponent as the project name
  • Press Enter
  • Select a folder to store the project
  • Click Create Project. You should see something like this as your base setup:

Sdx 22Authorize Your Non-DevHub Org via Command Palette

  • In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS
  • Type SFDX
  • Select SFDX: Authorize an Org
  • Select the login option accordingly. Select login.salesforce.com to log into your developer org or select test.salesforce.com to log in to the sandbox. You can also use a custom domain URL to log in.
  • Log in using your org.
  • If prompted to allow access, click Allow

Sdx 23

  • After you authenticate in the browser, the CLI remembers your credentials. The success message should look like this:

Sdx 24

Create a Lightning Web Component via Command Palette

  • In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P on Windows or Cmd+Shift+P on macOS
  • Type SFDX
  • Select SFDX: Create Lightning Web Component
  • Press Enter to accept the default force-app/main/default/lwc
  • Enter your desired name as the name of the new component
  • Press Enter
  • View the newly created files in Visual Studio Code

Sdx 25Deploying the Component to Org 

  • In Visual Studio code, select the default folder in the project or selected component
  • Right-click; you will see an option for SFDX:Deploy Source to org. Select it.

Sdx 26

After a successful deployment, you will see the following message in the terminal:

Sdx 27

Notes:

  1. Make sure that you have installed Java 8 or Java 11 and configure the path on your system.
  2. If you are not able to retrieve or deploy components and you’re getting “UNSUPPORTED_API_VERSION: Invalid Api version specified on URL” message, then execute the following command: “sfdx force:config:set apiVersion=48.0” and select the previous version in it.

The main objective of this blog is to provide you an overview and easy way to configure Salesforce DX on a system using VS Code. With the help of this new DX, we can create Salesforce application components like LWC components, Lighting Components, or any development in Salesforce org.

To learn more about the Salesforce developer tools available to you, click here.

Visit our Salesforce page to learn more about Perficient’s Salesforce partnership and our capabilities with the platform.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Amit Behere

Amit Behere is a technical consultant in the Perficient Nagpur GDC. He is experienced in Salesforce development, analysis, and providing solutions. He has also worked with Mulesoft and Appian. He is the group leader of the Amravati Salesforce Developer Group. He loves to learn and teach.

More from this Author

Follow Us
TwitterLinkedinFacebookYoutubeInstagram