DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Please enter at least three characters to search
Refcards Trend Reports
Events Video Library
Refcards
Trend Reports

Events

View Events Video Library

Zones

Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks

The software you build is only as secure as the code that powers it. Learn how malicious code creeps into your software supply chain.

Apache Cassandra combines the benefits of major NoSQL databases to support data management needs not covered by traditional RDBMS vendors.

Generative AI has transformed nearly every industry. How can you leverage GenAI to improve your productivity and efficiency?

Modernize your data layer. Learn how to design cloud-native database architectures to meet the evolving demands of AI and GenAI workloads.

Related

  • How to Set up Cypress and Typescript End-to-End Automation Testing Framework From Scratch
  • How to Set up TestCafe and TypeScript JavaScript End-to-End Automation Testing Framework From Scratch
  • The Serious Stack Behind Salesforce Developers — Part 2
  • Alexa Skill With Node.js

Trending

  • After 9 Years, Microsoft Fulfills This Windows Feature Request
  • Apple and Anthropic Partner on AI-Powered Vibe-Coding Tool – Public Release TBD
  • Simplifying Multi-LLM Integration With KubeMQ
  • Endpoint Security Controls: Designing a Secure Endpoint Architecture, Part 1
  1. DZone
  2. Coding
  3. Languages
  4. Introduction to Salesforce DX With Salesforce CLI and DevHub

Introduction to Salesforce DX With Salesforce CLI and DevHub

Salesforce Developer Experience (DX) is the continuous development environment to manage the Lightning Applications.

By 
RAJABABU MARIAPPAN user avatar
RAJABABU MARIAPPAN
·
Jun. 15, 20 · Tutorial
Likes (2)
Comment
Save
Tweet
Share
11.3K Views

Join the DZone community and get the full member experience.

Join For Free

Introduction

Salesforce Developer Experience (DX) is the continuous development environment to manage the Lightning Applications. In this paper, the Environment setup for DevHub, Salesforce-CLI, and Visual Code is done, and a simple lightning component is created and the process of pulling and pushing from scratch org to IDE and vice versa is done. 

Environment Setup

  1. Dev Hub setup

Step-1: login into the Salesforce

https://login.salesforce.com

Step-2: Click on setup -> type DevHub in Quickfind or search and click on Dev Hub under Develop

Step-3: Enable the Dev Hub (once enabled and later cannot be disabled)






Salesforce CLI Setup


Step-1: Download Salesforce CLI and install from below link

 

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


Step-2: Verify the installation type “sfdx” command in the command window and will get the following message.


Step-3: To install the salesforce dx plugin type the following command







Visual Studio Setup

Step1: Download Visual Studio code and install from below link

https://code.visualstudio.com/Download

Step-2: Add the Salesforce Extension as follows

  • Click on Extension Icon -> type salesforce in search and install


Create a Hello World Lightning Web Component

  1. Create a Salesforce DX Project

Step-1: In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P and type SFDX.

Step-2: Select SFDX: Create Project.

Step-3: Enter HelloWorldLightningWebComponent as the project name and press enter


Step-4: Select a folder to store the project and click “Create Project ”


Once clicked Create Project the following message will display at the bottom

The following project structure is created automatically after successful creation of the project

HelloWorld

Authorizing the Dev Hub

Step-1: In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P and type SFDX.

SFDX

 Step-2: In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P. Type SFDX and click on SFDX: Authorize a Dev Hub option.

SFDX: Authorize a Dev Hub option

Step-3: once clicked on SFDX: Authorize a Dev Hub option then follow the steps

  • Now salesforce CLI tries to connect salesforce org as follows

salesforce CLI

  • Once org is opened it will ask credentials as follows

salesforce login

  • Once correct given correct credentials, Salesforce CLI will ask for Allow Access as follows

allow access


  • Once given Allow Successful message is displayed in the console and the home page will open as follows

SFDX


Creating Scratch Org 

Step-1: In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P and type SFDX.

 Step-2: In Visual Studio Code, open the Command Palette by pressing Ctrl+Shift+P. Type SFDX and click on SFDX: Create a Default Scratch Org

Create a Default Scratch Org

Step-3: once clicked on SFDX: Create a Default Scratch Org option then select the default scratch org definition file as follows

Default Scratch Org

Step-4: Once clicked on default scratch org definition file then it ask to enter org Alias or use a default alias name 

default org

Step-5: Once clicked on entering then it will expiration value from 1 to 30 (default is 7) and give default as follows

expiration values

Step-6: Once clicked on enter the default value then it will successful creation message as follows.

enter default value

Step-7: To open scratch org type “SFDX: Open Default Org” as follows

SFDX: Open Default Org

When clicked on “SFDX: Open Default Org”, salesforce cli will open salesforce org

Opening message in VS code Console as follows

Opening message in VS code

  • When it is successful the salesforce org opened and with a different username (here it is scratch org).

home setup 

Creating Application and Pushing/Pulling From Scratch Org

  1. Creating a Lightning Component as follows

Step-1: In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P and type SFDX.

open the Command Palette

Step-2: To create Simple Lightning Component select “SFDX: Create Lightning Component”.

create Simple Lightning Component

Step-3: Type component name as follows.

Step-4: Select the location as follows(default)

select location

  • Once default location is selected then the following structure is created as follows

create component

hello world component

 Step-4: As per now write some code in the component as follows.

write code component

Pushing to Scratch Org From Visual Studio Code

Step-1: In Visual Studio code, open the Command Palette by pressing Ctrl+Shift+P and type SFDX.

Command Palette

Step-2: Push the created component into the scratch org as follows.

scratch org

Step-3: Once clicked on SFDX: Push Source to Default Scratch Org the Salesforce CLI will display as follows.

Push Source to Default Scratch Org

Step-4: Once done, verify the component in the Scratch as follows:

  • Open scratch org in the browser (here the org is already opened in the 2.1.3 (step-6)).
  • Type lightning component in quick find search.
  • The newly created component is added successfully in the scratch org.

lightning components

Pulling From Scratch Org to Visual Studio Code

Step-1: Open Developer Console and create Lightning Component as follows

create Lightning Component

Step-2: Name the Component as follows

naming the component

Step-3: Change the code as follows:

changing the code

Step-3: Open Visual Studio Code and type sfdx and click “SFDX: Pull Source from Default Scratch Org”.SFDX: Pull Source from Default Scratch Org

  • Once clicked then following output will display in the console

output display

  • In the Project structure Successfully pulled the newly created component as follows:

project structure

Summary

Successfully done with Salesforce DX implementation using Salesforce CLI, Dev hub, and Visual code Studio.

Command-line interface Visual Studio Code Scratch (programming language) Command (computing) dev Lightning (software)

Opinions expressed by DZone contributors are their own.

Related

  • How to Set up Cypress and Typescript End-to-End Automation Testing Framework From Scratch
  • How to Set up TestCafe and TypeScript JavaScript End-to-End Automation Testing Framework From Scratch
  • The Serious Stack Behind Salesforce Developers — Part 2
  • Alexa Skill With Node.js

Partner Resources

×

Comments
Oops! Something Went Wrong

The likes didn't load as expected. Please refresh the page and try again.

ABOUT US

  • About DZone
  • Support and feedback
  • Community research
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Core Program
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 3343 Perimeter Hill Drive
  • Suite 100
  • Nashville, TN 37211
  • support@dzone.com

Let's be friends:

Likes
There are no likes...yet! 👀
Be the first to like this post!
It looks like you're not logged in.
Sign in to see who liked this post!