Lightning Web Components: A Complete Step-By-Step Guide
Lightning Web Components (LWC) provides a new way of developing Lightning components for the Salesforce Platform. LWC was introduced by Salesforce in the Spring ’19 release cycle. Previously, the Aura component framework was used to develop lightning components and it was made publicly available to Salesforce developers and admins in the Winter ’15 release. Before that, Salesforce was internally using it to power the lightning experience. The Aura component framework is an open source framework developed by Salesforce. The lightning component framework was a subset of the Aura framework which means that not all the capabilities of Aura framework were opened up for the Salesforce developer community. Aura was leveraging its own component model, templates, and modular development programming model. The reason for this enclosed standard was due to web standards that were not fully developed to support large enterprise level applications. With the unprecedented level of innovation and standardization ECMAScript 6 onwards, it has opened new opportunities for both vendors and the community in general. The improved standardization of the core stack has opened the doors to a new breed of frameworks — frameworks whose major task is to no longer to fill in the gaps within the core stack, but to provide a thin layer of specialized services on top of a standard stack.
LWC’s are the Salesforce implementation of that new breed of lightweight frameworks that are built using the web standards. Now, if you go to the Lightning Components section under Custom Code in your Salesforce Setup, you’ll see that both the Aura and the LWC co-exist here with the ‘Type’ column in the list view, differentiating between the two.
Setup For Creating a LWC
Before we start creating our first LWC, there are certain things we need to take care of. Since we will be developing the LWC using the Salesforce DX tools, we need to install and setup a few tools first. Salesforce DX was released in the Winter 18 release cycle and is based on the source-driven development model. It is just a combination of different tools which allow you to adopt the package based approach for organizing and distributing your source. These tools include:
- Git
- Salesforce CLI
- Visual Studio Code with the appropriate extensions installed
The step-by-step guide below will show you how to develop and deploy a LWC into your Salesforce Org:
- Download and install the git version control system (if it is not already installed — check by opening a terminal window and typing in ‘git’)
- Download and install the relevant version of Salesforce CLI from the Salesforce CLI site
- Once it is installed type and enter “sfdx” in terminal to ensure it is working correctly
- Download and install Visual Studio Code. It is a “no frills attached” version of Visual Studio and you have to install extensions based on your usage. Even Microsoft technology stack does not come pre-configured in this
- Open Visual Studio Code (VSC) and go to extensions from the View tab (can also use Ctrl + Shift + X shortcut) to install Salesforce CLI Extension
6. Install Salesforce Extension Pack
7. Install Lightning Web Components extension
8. It is advisable that you install the following plugin through the terminal using the following sfdx command: sfdx plugins:install salesforcedx@pre-release. This installs the “newer-than-latest” version of all the sfdx commands even if they are in beta version. This is helpful because some Orgs (as of June 19) may still experience some issues with some commands otherwise. *You can always move back to the latest stable release using the following command: sfdx plugins:install salesforcedx@latest
9. Now we will create a SFDX Project. We can create SFDX projects from VSC as well as from the terminal. The VSC command palette (accessible through Ctrl+Shift+P) has the sfdx commands available but they have a wrapper on them to make them more user-friendly. In the palette, you can use the “SFDX: Create Project” command. On the other hand, in the terminal, you would need to use the “sfdx force:project:create” command. In the palette, once you enter the command, you just have to provide the project name and it will create the project with the default directory structure
Note: you can create LWC without using SFDX as well, and the option to use is ‘SFDX: Create Project with Menifest’. It will let you create Lightning as well LWCs and other SFDC development and deployment without using SFDX.
10. The default directory structure for a new project created using the ‘standard’ template looks like this in VSC:
11.Details about the project structure and source format can be found at this link. It also contains information about the file extensions that are used
12. We need to authorize the Org to which we’ll be deploying our LWC. For this, we use the “SFDX: Authorize an Org” command from the VSC command palette. It will ask you to select the URL that you want to use for authorization. Depending on your Org, select the appropriate one, then you have to enter an Alias name for this Org. Type a name of your choice as it will be used internally by VSC for this project. This is important because you can select and authorize different Orgs for the same project and this allows you to deploy your source to different (trailhead playground, developer, sandbox and production) Orgs. Once Alias and URL are added, the OAuth authentication opens a pop-up window in the browser where you login using the Org credentials. You can also view all your authorized Orgs show up in the project path in your project explorer as shown below:
13. Now we need to create the LWC using the palette command “SFDX: Create Lightning Web Component”. It will ask for the filename and you can provide an appropriate component name here. It will finally ask for the location where you want to save it and you can select the default location which is something like: force-app/main/default/lwc
14. With our LWC created, it is important to take a look at it through project explorer in VSC to understand the files created by default and their structure:
15. Every LWC has these three files by default. These follow the web standard for component based development model and we already know that LWC are designed by keeping in view the web standards. The html file contains the template tag and everything goes inside that
16. The default JS file looks like this:
17. The js-meta.xml file is the most important one as it defines all the bundling and LWC permissions for the particular component:
18. Note that if you want your LWC to appear in app builder under Custom Components section, you need to add a “targets” section in your meta.xml file. You have to grant access separately for different types (AppPage. RecordPage, HomePage) of pages present in app builder:
19. Once you are done with your component code, you can deploy your component directly from within VSC. There are a couple of ways to do that. You can deploy it through the command palette using “SFDX: Deploy This Source to Org” or by right clicking the component folder under the LWC section in the project explorer window.
20. Once it is deployed, you can drag and drop the component from the AppBuilder into your Salesforce Org to use it.
Have any questions? For more information, feel free to schedule some time to meet with our team by clicking on this link here.
Originally published at https://www.gosaas.io.
