Salesforce LWC Component Series — Part 1
Lightning Web Components Development — Step by Step approach
I’m not a developer who can blindly write a code without referencing documentation, because I’m just not keen to memorize each and every syntax, method names etc. They are all available online and easily accessible on a 10 second google search.
Therefore, I’d like to share the thought process and the approach that I would take if tasked with developing a Salesforce Lightning Web Component (LWC). As the story name suggests, this is going to be a Series, as I realized it will be too lengthy to do it all in one go.
This might turn out to be a step-by-step instruction - but rather than saying, “copy and paste this code” — my focus will be to share the thinking behind achieving the result. However, there’s a number of steps before writing the actual code, that will need to be prescriptive. The focus of this story will only be on such things — tools required, and everything that needs to be done before writing the actual first line of code.
Requirement
Ok — Let’s make up an imaginary requirement for an LWC.
The requirement is to create an LWC component that can be placed in the Home screen to display the logged in user’s basic details : Name, Username and Profile.
Setup Tools Required for Development
Now, by experience or by going through the Trailhead Modules, I’m aware that Developer Tools like VS Code is required to be able to develop LWCs. Therefore, I searched in Trailhead to find a module that explains steps to set up tools: Set Up Your Lightning Web Components Developer Tools.
However, this module talks about activating DevHub. I think that’s a bit of an overkill and therefore will skip activating DevHub. All we need is the ability to push code from VS Code to a connected Org. Also, for the purpose of this exercise, I’m just using a Trailhead playground.
Anyway, as a minimum, we would need the following steps to be completed before starting the LWC development. If you already have tools for LWC development, please skip.
- Install Salesforce CLI from here.
- Install VS Code from here.
- Install Salesforce Extension Packs in VS Code. For this, go to Extensions in VS Code and search for ‘Salesforce Extension Pack’
4. The step that I always forget is to set up Java Runtime Environment. After doing the above, when you open VS Code, you will probably start seeing an error/warning message on the bottom right as below:
To set it up, follow the link in the above message, or go to this link. As you see there are a number of different runtimes that could be installed. I usually go for the simple Oracle Java setup. Download the .exe file in the list of installers (second one). Install JRE using this downloaded file — use default options.
After installing JRE, the Java home needs to be set in VS Code. This can be done by going to File -> Preferences -> Settings -> Search for Java in the settings that open up. Copy and paste the location of the installed JRE in the Java home.
First Steps
There are few things a developer would always need to do before starting development. These are things like Creating a project, Adding/Creating the boilerplate code and Authorize an Org.
1. Create a Project in VS Code
In VS Code, create a new project. Normally, you would expect to see an option ‘Create Project’ in ‘Files’. But there isn’t one, as we need to create an SFDX project. Instead, Press : Ctrl + Shift +P and type in SFDX. This is an important shortcut to remember, as this needs to be used to select the SFDX commands.
The project can be named anything and placed anywhere, as the project is just a container to hold the code that we are going to develop.
2. Create an LWC component boilerplate code
I’m calling it a boilerplate code, because VS Code creates a number of code files for LWC by default and automatically adds in some basic lines of code to start off. Let’s see how to start LWC creation and what files gets created automatically.
In VS Code, open the newly created project (if not already open) and navigate to <Project Root location>\force-app\main\default and expand it. Right click over the folder lwc and select ‘SFDX: Create Lightning Web Component’.
Enter an appropriate name to be used for the Lightning Web Component. I have used the name loggedInUserDetails As seen below, an HTML file, a JS file and a js-meta.xml file gets created automatically.
Also, on the right side we can see that the newly created JS file has opened automatically and has two lines of code already in it. Similarly, the HTML file gets created with an empty <template> tag.
3. Authorize an Org
To test LWC component, VS Code needs to be authorized to an Org and the code needs to be pushed into the Org for testing. In real life, this Org would be the Developer’s Org or a Scratch Org.
Press : Ctrl + Shift + P and type in SFDX : Authorize — this should automatically show the option ‘SFDX: Authorize an Org’. Select it, then select option as ‘Production’ (for Trailhead Playground) and enter an appropriate name for the Org, press Enter. This would automatically open up the login page in browser. Enter the username and password to login. Make a note of the username and password in advance, if you are using a Trailhead Playground. Once logged in, VS Code will start showing the name of the Org on bottom left.
To be Continued…
This completes the setup and tools required for Salesforce LWC development. Creation of a simple LWC will be done in the Part 2 of this Story series.
