Salesforce has been really working hard to get us a local development tool for long time. We heard about this during Trailhead ’19 and now it’s officialy released.
This first release of Local Development for Lightning Platform is BETA, and may contain bugs and some missing features, so hold on to your first impressions.
I am assuming the below before we get started:
- You know about LWC Development
- SFDX CLI and Node.js is installed and they are in their respective latest versions.
- You know how to setup SFDX project, authorise to your developer org, and create scratch orgs.
So let’s get stared.
How to Install LWC Local
Well, it’s simple. Go to Command Prompt/Termimal and run the below command.
Run LWC Local Development
For this example, let’s download the Easy Space app from the Sample Gallery in Salesforce Developer site. Make sure you create a scratch org in your developer org and install the app in your scratch org.
Once your app is installed, run the below command in your project.
If it runs successfully, you will see a server url created. Copy it and open in your browser to view your Local Development Server.
Now let’s get into three of the main features here.
Preview Lightning Component Locally
Try opening a component, and you can see a kind of preview of what you have build, without deploying to your org. How INTERESTING is that!! Click the View in VS Code button and you can see the code.
Now since Salesforce Developer ensure that the apps in Sample Gallery bug free, let’s make some mistake in one of our component and view the component in the Local Development Server. In this example, I have made some mistake in reservationDetailForm.js file. Now let’s try viewing this in our Local Development Server and you can see the error popping with details.
Click on the small Go to source (vscode) link, and you will see the source code opened in VS Code and the cursor at the exact line where the error is thrown. Fix it, save it, refresh your page and you will see the component. How SIMPLE is that!!!
View Components with Data
If you have noticed, you might not been successful opening some components in your development server, like the one shown below, where you need some real data to show the component.
Now if you open the component, you see that there is a call made to an apex method to retrieve related Space records using @wire decorator.
So all you need to do is to hard code the record Id as shown below, and you must be able to view the component in your development server.
Hard coding record Ids is not really a great thing to do in your code. So Salesforce is working on improving the tool in coming releases where you can set component attributes in your Local Development Server.
So that’s what we have so far. But Salesfore has a wonderful roadmap ahead to improve the tool. Looking forward to the same.
So what you think? Comment your thoughts and let me know.