Salesforce DX: What it is? How to set it? and how to create a sample project?

The Salesforce Developer Experience (DX) is a set of tools that makes the entire development life cycle better, improves team development, collaboration between team members, reduces development time, automate testing, and makes CI and CD easy to implement.

In this short article, I have tried to explain how to set up Salesforce DX.

Salesforce DX is not a single tool but a combination of tools. In order to set Salesforce DX, we need to have IDE, CLI and code repository configured first.

IDE - Install Visual studio code:

Though we can use any of our favorite IDE for SF development purpose, but VS code is most widely used and most recommended IDE. VS code is lightweight, modern, open sourced tool created by Microsoft.

VS code allows developer to enable CLI and extension pack. Both of these additional tools enable developers to interact with their SF orgs (scratch orgs or trial org or prod org) through command line terminal without leaving the IDE. These tools have been explained below.

In my opinion better CLI (command line interface) meaning better option to automate the process. Command which can be used through CLI, can easily be used in scripts and scripts can be enabled to be executed on demand or can be scheduled to run on a particular time or event. So, this enables the feature of CI/CD. A modern way to deploy the feature code or any enhancement or bug (DevOps).

So, the first step to set up the DX is to download and install VS code. You can download the exe from here - https://code.visualstudio.com/

Install Salesforce CLI:

CLI stands for command line interface. Salesforce CLI simplifies the development and also enables to automate the tasks while working with SF orgs. It’s a text-based interface which allows us to do complex task easily and quickly. As I mentioned in my previous paragraph, CLI helps us to automate development and deployment processes.

VS Code enables SF extension packs and command line interface to be configured and these configurations make development work quicker and less chances of errors. SF extension pack for VS code are fully supported by salesforce.

Command line tool for windows is command prompt or for Linux it is a terminal. But since VS code has built in terminal window so it allows us to use the command from the same IDE window rather flipping from code window to command window. With the code editor window, we can execute commands which are needed to perform any operation in our org or to interact with GitHub also.

(Learn more about GitHub - https://www.dhirubhai.net/pulse/git-github-useful-command-developers-gaurav-jain/)

Install the SF CLI from here –

https://developer.salesforce.com/tools/sfdxcli

Install Salesforce Extension pack:

Once the above two installations are complete, we need to install the salesforce extension pack in VS Code. Open VS Code on the left-hand side, you will see sign for extensions (or alternatively ctrl + shift + x). Search for salesforce extension pack, go ahead and install that extension.

Salesforce extension pack allows certain extensions to be installed automatically. Like – Apex, Visual force, Aura components, Lighting components etc.

Once our development environment is ready after all the above installation, we are ready to use it for development work and to deploy the code in our org.

Open visual studio code and create a project first and learn some basic commands to use in CLI.

Create project:

In order to start our work, first we need to create a project in VS code.

We can either use VS code GUI.

From GUI – View - > command palette (alternatively ctrl + shift + p).

Or open command terminal and type below command –

sfdx force:project:create --n mywork

If you are using GUI, it will ask few other options like project name, project location, project type etc.

If you are using CLI, it will create the project in the current working directory.

This above step will create the basic structure of the project. Now in VS code we will open our created project directory and will start working on code.

After project gets created whatever option you choose, you will open the project directory in VS code and you will see below project structure –

 Authorize your SF org:  

Next, we need to authorize our salesforce org(The org with which we want to integrate).

That can also be performed either by GUI or by command line. Whatever method you will choose next it will redirect you to login page in your org. Where you will provide your org credential. Once org is successfully authenticated it will remember your cred and will not keep asking you for the credential again. You can also provide the alias to your org to make it easy to refer it in future.

Please note – We can also create scratch org which is most ideal way to work on development project but that is outside of the scope of this article.

sfdx auth:web:login --setalias mydevbox

If the org is authenticated you will get success message. Now we have VS code and our SF org connected together.

Write code – (Create a sample lighting component):

Now our code editor integrated with our salesforce org.

For this article, I just want to create a sample (“Hello World”) lighting component and deploy that to my connected org.

Like above mentioned command, we have option to either use GUI or issue a command to create a lighting component.

sfdx force:lightning:component:create -n Helloworld -d force-app/main/default/lwc --type lwc

After successfully execution of the commands (whichever way we choose), we will see a new folder inside lwc directory in our project (in our case “Helloworld”). In that folder, we will see 3 files, which are required for lighting web component. Explaining these files are outside the scope of that article and I will write that in a separate article.

Just for demo purpose, I made small changes in my “Helloworld” component as below –

<template>

    <p> hello world!! </p>

</template>

We also need to update component meta.xml file, if we want to use our LWC in our app page.

<isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__AppPage</target>

        <target>lightning__HomePage</target>

    </targets>

Deploy your code – (Deploy the lighting component which you have created above):

If you want to use UI , simply right click on the component folder and click on deploy source to your org or use below command.

sfdx force:source:deploy -p force-app/main/default/lwc

You may also need to set up the default username before doing so. You can do that by following command.

sfdx config:set defaultusername=<username>

Open your org and verify that you see the deployed component.

You can use command (sfdx force:org:open -u <alias name>) or you can also manually open the org to verify that you see the deployed component.

Finally, logout from your org, use below command –

sfdx auth:logout -u <username>

By using above steps you can set up your IDE and integrate it with your SF org for development work. Thank you for reading.