{"id":192561,"date":"2019-10-03T10:00:55","date_gmt":"2019-10-03T16:00:55","guid":{"rendered":"http:\/\/developer.salesforce.com\/blogs\/?p=192561"},"modified":"2025-11-05T02:21:31","modified_gmt":"2025-11-05T09:21:31","slug":"announcing-lwc-local-development-beta","status":"publish","type":"post","link":"https:\/\/developer.salesforce.com\/blogs\/2019\/10\/announcing-lwc-local-development-beta","title":{"rendered":"Announcing LWC Local Development Beta"},"content":{"rendered":"

The wait is over! Today, I am happy to share with you the first release of Local Development for the Lightning Platform. Local Development enables you to build, run, and test your Lightning Web Components without deploying your code to your Salesforce org. This will dramatically decrease the time it takes to build apps with LWC.<\/p>\n

To jump right in, take a look at the documentation<\/a> and start using this feature today. Since this is a beta, there will be bugs and missing features – please let us know if you encounter any problems by opening a Github Issue.<\/a><\/p>\n

Local Development is a plugin for the Salesforce CLI. Eventually, this will ship with the Salesforce CLI out of the box, but for now you will need to install it by running the following command.<\/p>\n

sfdx plugins:install @salesforce\/lwc-dev-server<\/pre>\n
Once, the plugin is installed you can run the Local Development Server on your Salesforce project by running the start command. Note that you will want to be authorized into an org before you start the server so you can take advantage of the data proxy features. See the full documentation for details.<\/p>\n
sfdx force:lightning:lwc:start<\/pre>\n
There are three main areas where we are aiming to improve developer productivity with Local Development. The first is the ability to render components locally in as close to a real environment as possible. The goal is that if your component works locally, it will work in the org.<\/p>\n
When you first start up the Local Development Server you will see a screen that lists all of the components in your project. You can search for components and select the component you want to open.<\/p>\n
\n\t\t\t  \n\t\t\t    \"\"\n\t\t\t  <\/span>\n\t\t\t
\nWhen you open a component you will see it render in the browser without deploying to the org. From the component preview page you can even click the blue \u201cView in VS Code\u201d button to quickly open the code for this component. When you make changes to the component, you will see those changes refresh in the browser immediately.<\/p>\n
\n\t\t\t  \n\t\t\t    \"\"\n\t\t\t  <\/span>\n\t\t\t<\/p>\n
The second thing we aim to do with Local Development is to make it easier and faster to find and solve errors. Typically with Salesforce development you often won\u2019t find a mistake in your code until you try to deploy to your org \u2014 you will see an error in the console that sometimes can be a little tricky to parse and figure out what caused the error. With Local Development you can immediately see errors in the browser along with details such as the exact error message, the file and line where the error occurred, and a code snippet and stack trace to immediately identify the error. Better yet, you can click the link \u201cGo to source (vscode)\u201d to open the file to the exact line where that error occurred and quickly fix the problem.<\/p>\n
It is this easy: see in the image below that I referenced the @wired<\/code> decorator instead of the @wire<\/code> decorator. I can then click the \u201cGo to source\u201d link, fix my typo, save the file, and immediately see the fix take effect.<\/p>\n
\n\t\t\t  \n\t\t\t    \"\"\n\t\t\t  <\/span>\n\t\t\t<\/p>\n
The final area we have enabled in Local Development is integration with real org data. Because most of your components involve using some form of Salesforce data it is important to be able to consume that data even when running locally. With Local Development, requests for data using Lightning Data Service or Apex will get proxied to your Salesforce Org and returned in your local components. You can do anything locally that you can do in your org such as create and update records, call apex controllers, and use decorators such as @wire<\/code>.<\/p>\n
In order to see the product card show real data, you can hard code the component\u2019s recordId<\/code> property to use a specific record. Then the component will render just as it would in the org. In coming releases, there will be tools in the Local Development Server to set component attributes so that it won\u2019t be necessary to hard code development values when running and debugging locally.<\/p>\n
\n\t\t\t  \n\t\t\t    \"\"\n\t\t\t  <\/span>\n\t\t\t<\/p>\n
\n\t\t\t  \n\t\t\t    \"\"\n\t\t\t  <\/span>\n\t\t\t<\/p>\n
Roadmap<\/h2>\n
Today with the beta release of Local Development, we are setting the foundation of a super productive UI developer experience for Salesforce developers. However, this isn\u2019t the final stop. We will continue to add enhancements and remove the current limitations<\/a> to make Local Development more similar to running in a Salesforce org. Additionally, there are some tooling enhancements that will make working with components even easier. The following items are on our roadmap:<\/p>\n