Salesforce Development Tutorial (LWC): How to Setup the LWC Local Development Server

Why setup the Local Development Server?

After you use it a couple times I promise you won’t ever ask this question again, lol. It makes your LWC development SO MUCH FASTER!!! I mean it might actually be Lightning Fast! (I’m sorry, but I’m not letting that joke go…).

If you’ve ever developed LWC’s directly in Salesforce you know that a handful of things can happen, your refresh times after updating your LWC’s can be ultra slow. Additionally, even after turning off persistent caching in your dev org, you will occassionally still have your component cached. That leaves you sitting there refreshing and wondering, “Wtf… how is this even possible? Do I really suck at code this much?” At least those are the thoughts I often have, lol.

With the Local Development Server, you don’t have to worry about those things ever again. It makes SF development so much easier to deal with.


What you need to install to use the Local Development Server

To setup the Local Development Server, you need to do the following things:

1) Install the Salesforce CLI
2) Install either VSCode or the IntelliJ IDE and the Salesforce plugins for them
3) Create an SFDX Project in either IDE listed above
4) Install the Local Development Server Salesforce CLI plugin by running the following command:

sfdx plugins:install @salesforce/lwc-dev-server

There is a VERY important thing to note! In the documentation Salesforce provides for how to setup the local development server it states you need a, “Developer Hub-enabled org” to use the local dev server. THIS IS NOT TRUE! I mean, it’s in your best interest to start using scratch orgs if you can, but enabling the dev org is not a requirement for setting up the local dev server. I’m not sure if at some point it used to be required, but it isn’t anymore.


How to run the Local Development Server

After you have done the installation steps above, you can start using your local development server in one of two ways.

1) If you are in Visual Studio code, you can bring up the command palette (ctrl+shift+p) and type in the following command: SFDX: Open Local Development Server. This command will start the development server and open a browser tab for it after it has successfully started up.

2) If you are in another IDE, you can run the following CLI command from within your SFDX project:

 sfdx force:lightning:lwc:start

This command will start your development server, but not open it in a browser tab automatically. You will then how to type the following address into a new tab in your browser: http://localhost:3333/

Then that’s it! You should be up and running with your Local Development Server!


How to change the port your Local Development Server runs on (Among other things)

If you need to alter some of your local development server configuration settings, you can do that!

You just need to create a file in the root of your SFDX project called localdevserver.config.json and add the relevant JSON to it. You can see an example here from Salesforce themselves, however the JSON example they have is actually incorrect, you have to make sure to wrap you names in double quotes (which is not shown in the Salesforce example. I’ll show you what I mean below with an example:

{
  "port": 3333
}

It’s super important to add those double quotes are the name in your JSON name value pairs. Otherwise nothing is gonna work!


Get Coding With The Force Merch!!

We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!


Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram


Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps

Good Non-SF Specific Development Books:

Clean Code
Clean Architecture

Salesforce Development Tutorial: How to use the SFDX Scanner Salesforce CLI Plugin for Static Code Analysis

Why Use Static Code Analysis Tools?

There are two major reasons to use static code analysis tools:

1) They make you a better developer. These industry standard rules exist for a reason. To make code clean, modular and easy for all the developers that come after you to deal with. So be a kewl guy and make some beautiful code.

2) If you haven’t had to deal with this, I envy you, but for many of us out there you will eventually have your codebases reviewed by a third party. It may even be Salesforce themselves, and when they review your codebase they will run these tools against it to gauge the health of the code in your org. I have seen people lose contracts because of this (and in some cases rightfully so), but if you are constantly running a static code analysis tool again your code you write every sprint and fixing the problems it finds, you’re not gonna see too many issues pop-up when someone else reviews the code.


How to use the SFDX Scanner Plugin?

To utilize the SFDX Scanner plugin we need to do the following (Checkout the GitHub wiki I wrote here):

1) Install the Java Development Kit (JDK) version 8 or higher

2) Install the Salesforce CLI

3) Setup a Salesforce VS Code Project

4) Install the sfdx scanner plugin for the Salesforce CLI by opening up a terminal window and running the following command:

sfdx plugins:install @salesforce/sfdx-scanner

5) Open the Terminal in VSCode and run the following command to scan your entire codebase for all static code issues (make sure to replace pathToFile.csv with the actual path for your file):

sfdx scanner:run --target "**/default/**" --format "csv" --outfile "pathToFile.csv" 

6) The above command will output a csv that shows you all of the issues with the code in your org within a few seconds (unless you have a mega code-base. It may take a few minutes then).

7) For more information on the wealth of configuration options you have with this cli plugin, please check out the SFDX Scanner GitHub repo

That’s it guys! Pretty simple! There are a ton of additional configuration options you can do with this CLI plugin and you can check them out in the GitHub repo linked above. In a future article I will hopefully show you how to make custom pmd rules and rulesets to use if you aren’t a fan of the default ones, but that’s a pretty big topic.


Get Coding With The Force Merch!!

We now have a redbubble store setup so you can buy cool Coding With The Force merchandise! Please check it out! Every purchase goes to supporting the blog and YouTube channel.

Get Shirts Here!
Get Cups, Artwork, Coffee Cups, Bags, Masks and more here!


Check Out More Coding With The Force Stuff!

If you liked this post make sure to follow us on all our social media outlets to stay as up to date as possible with everything!

Youtube
Patreon
Github
Facebook
Twitter
Instagram


Salesforce Development Books I Recommend

Advanced Apex Programming
Salesforce Lightning Platform Enterprise Architecture
Mastering Salesforce DevOps