Setting Up SFDX Environment. And creating your first Lighting Web Component.
Or Quick Start: Lightning Web Components Badge in short.
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.
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.
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.
once you are done with this your scratch org is ready for use.
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.
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
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.
So that’s it, guys. happy coding…
“Lighting Quick Action in LWC.”
If you like this article. follow me on twitter for more updates. twitter.com/@awsomvinod