Setting Up SFDX Environment. And creating your first Lighting Web Component.

Or Quick Start: Lightning Web Components Badge in short.

5 min readSep 4, 2020

Salesforce Developer Experience.

I hope you all love VSCode. I love it the most. But when you were working a few years ago as a salesforce developer you probably working with Eclipse IDE and force.com. You know before start working as a salesforce developer I used to be a Javascript developer in my college. But after joining my first company I started working as a salesforce developer. I loved Salesforce Eco-System but I hate the Eclipse thing 😑. And luckily the Sfdx was launched. So I started exploring the sfdx development environment. So here I am gonna try to merge all my findings so you can also start developing your new salesforce apps in the SFDX environment. I will also try to explain the new sfdx terms like Scratch Orgs, Dev hub orgs, 2G Packaging, Salesforce CLI, and Deployment, etc. So let’s get started 🚀.

Download Salesforce CLI

Salesforce CLI is the command-line interface which will help us to make lot’s of task easier like creating LWC or creating an Apex class deploying your code to an org, or pushing your code to a scratch org (Yes deploying and pushing are different 🤘🏻), before we start we let’s start with installing Salesforce CLI. You can use this link for downloading Salesforce CLI for your favorite OS.

Salesforce CLI

Edit description

developer.salesforce.com

Or you can use NPM to installing CLI

npm install sfdx-cli --global

Now to check that CLI is installed successfully run the below command.

sfdx --version

you should have output something like this.

sfdx-cli/7.72.0-697e9faee2 win32-x64 node-v12.18.3

Now let’s create a folder for your first sfdx project and open in VSCode. And install Salesforce Extension Pack.

This is gonna make rocket science easier. 😜

Now press Ctrl + shift + P to open command palate in vs code and search for creating a project with manifest

You can select Standard (default) for project type and provide your project name FirstSfdxProject.

If your Project directory looks something like this. You are good to go. Cheers… 🥂

Now the next big thing. Salesforce Dev-hub org.

ohh, come on not so big. Just go to salesforce and signup for Developer Edition org, Once you are done then go to setup and enable Dev-hub.

Great job guys…..

Now we need to authorize this dev hub org with our VSCode. So Go back to vs code and open command palate (ctrl + shift + p) and type authorize a dev hub org and hit Enter. You will be redirected to the chrome tab with login.salesforce.com and here you need to login to your recently created Dev hub org. After login, if it prompts for allowing access to vscode then give access.

you should see this message on your VSCode if so then you can close the chrome tab and you have successfully authorized your dev hub

Dev-hub org nothing just a developer org that will help you to manage you project and scratch org with team. I will suggest you to use scratch org for your development and testing.

Scratch orgs.

Now let’s go back to command palate and search for create a default scratch org.

This is going to be your scratch org alias.

Here you will tell how long you need the org after that it will expire.

once you are done with this your scratch org is ready for use.

your org alias should be visible in the removed area and by clicking the highlighted icon you can open your scratch org directly.

Deployment…

To start coding we need to create some salesforce components. How about LWC. Hmm…Hmmm😉😉.

Call your friend and tell him to create an LWC component… Yes, your friend Command Palate.

Hit enter and type the name you want to name your component (firstcomponent in my case) and choose the default directory.

Do some changes so we can add this LWC to your lightning Record Page.

We also need to make some changes in the -meta.xml file so that we can add the component to the Lightning Record Page.

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>49.0</apiVersion>
  <isExposed>true</isExposed>
  <targets>
    <target>lightning__RecordPage</target>
  </targets>
</LightningComponentBundle>

now again call you friend and say sfdx: Push Source to Default Scratch Org

It indicates that we are ready to test out our Lighting Web Component.

Now open any Record detail page on salesforce org and click on the edit page from the gear icon (we normally use to open the developer console.)

2G Packaging.

Sfdx comes with a new feature of 2nd Generation Packaging. I would suggest you to read this Comparison.

Comparison of 2GP and 1GP Managed Packages | Salesforce DX Developer Guide | Salesforce Developers

Learn how to use Salesforce DX to develop and manage apps on the Lightning Platform. Explore the entire development…