Local Development Server – Salesforce

With some experience working with the salesforce development team I noticed that local development works differently for salesforce development. Teams use their favorite code editors like eclipse, vscode etc and every time developer changes the the code and wants to test it, the code needs to be pushed onto a salesforce org. Vscode is the recommended IDE and provides a great integrated development and provides easy mechanism to sync the code with the org.

From my personal experience working on the salesforce development environment this may easily get turned into a frustrating development experience and slow things down a bit. Since there is no instant feedback on your code change, the coding experience feels prehistoric. On the other side having worked on lots of Angular applications previously the developer feedback was instant (thanks to the live-reload feature).

In year 2019, Salesforce introduced a brand new feature to solve this problem. They called it ‘Local Development Server’.

What is a Local development server?

“The Local Development Server is a Salesforce CLI plug-in that configures and runs a Lightning Web Components-enabled server on your computer. You can develop Lightning web components and see live changes without publishing the components to an org. “
Salesforce documentation

Wow, that sounds promising!

So now if you’re developing components you could easily test them locally without submitting it to the org and you see instant feedback of errors etc. Fix errors and instantly you see the local development server refreshing with your changes.

Development server aims to help in three main areas to improve productivity:

Provide component rendering experience as close to a real environment as possible. If your component works locally, it will work in the org.
Make it easier and faster to debug, find and resolve errors. The local server shows you the error in the browser with exact error message, file and line # where the error occurs.
Integration with the real org data. Any request for the data from your salesforce org will get proxied to the org and returned to your local component. You can do CRUD operations, call apex controllers.

How do you set it up?

Install vscode
Install Salesforce CLI
Install Salesforce Extension Pack
Local Development will ship with the Salesforce CLI out of the box but for now you need to install it by running following command
1. sfdx plugins:install @salesforce/lwc-dev-server
2. Next you create your project in vscode and authorize an org.
Now that the plugin is installed and the project is created you can launch the lightning web development server using this command
1. sfdx force:lightning:lwc:start Or
2. Use the vscode command palette and choose ‘SFDX: Open Local Development Server’. If the local development server isn’t running, this would start the server.
Open localhost:3333 in your web browser and this is what you would see.

Landing page on my local development server showing all lwc components from my project

Clicking on c-hello-world component produces this page which shows the output from the component.

At this point, any change you make to the component will refresh this browser window and reflect your changes.

Makes life little easier!

What is a “Scratch Org”

As per definition from Salesforce developer portal:

The scratch org is a source-driven and disposable deployment of Salesforce code and metadata. A scratch org is fully configurable, allowing developers to emulate different Salesforce editions with different features and preferences. You can share the scratch org configuration file with other team members, so you all have the same basic org in which to do your development.

As the definition states that the Scratch Orgs are disposable deployments which means they are not permanent and are great for temporary deployments. This can help in boosting developer productivity and easier for team collaboration especially for automating test & deployment. But the scratch orgs typically get automatically disposed off in 7 days. The max you can keep them for is 30 days.

Developer can share the scratch org with other members of the teams and develop together.

To be able to work with Scratch Orgs, you should first enable the Dev Hub in your business / production org.

Steps to create scratch org:

Pre-requisite:

VsCode, Salesforce CLI, Salesforce Extension Pack, Enable Dev Hub in your org.

Open VsCode
Open Command Palette (Ctrl + Shift + P) and choose: SFDX: Create Project with Manifest
Choose ‘Standard’ as project template.
Enter name for the project.
When asked, select a folder on the disk to save your project to.
1. VsCode would run the CLI command to create a basic structure for your project.
Open Command Palette and choose ‘SFDX: Open Default Org’. This should launch a new browser window and logging you to the new scratch org’s setup section.
At this point you can start creating the code artifacts. For example: to create an apex class, open Command Palette and choose ‘SFDX: Create Apex Class’, specify the file name and press enter. This would create a new apex class for you.

List of commands to generate various other artifacts in scratchorg

Push & Pull Code

To push your code to the scratch org, open Command Palette and choose ‘SFDX: Push Source to Default Scratch Org’.
If everything ran successfully you should see your custom apex class in the scratch org (setup à Custom Code à Apex Classes).
This way you can build various other code artifacts like Trigger, Lightning Component, Lightning Apps, Visualforce Pages etc. and deploy them to scratch org and test.
Like push, you can also pull the code from scratch org. From the Command Palette, choose ‘SFDX: Pull Source from Default Scratch Org’. This should pull all the code from the org to your local system.

For more information follow the salesforce documentation here.

Salesforce

Hello "Blog"!

Category Archives: Salesforce