Post date: Oct 03, 2019 5:6:1 PM
The beta for local development of Lightning Web Components is now available! This post describes how to use Illuminated Cloud with the LWC local development server.
CLI Installation
This post provides condensed instructions for installing, configuring, and using the LWC local dev server with Illuminated Cloud. For full details, please see the official documentation.
Make sure that the Salesforce CLI is up-to-date:
$ sfdx update
Install the LWC local dev server plugin:
$ sfdx plugins:install @salesforce/lwc-dev-server
Server Startup
From a project directory, start the LWC local dev server:
$ sfdx force:lightning:lwc:start -u <usernameOrAlias> [-p <port>]
The default value for <port> if unspecified is 3333.
NOTE: A new instance of the server must be started for each project. You can either stop the running server using Ctrl+C before starting a new instance in another project, or you must specify a unique port for each new instance. For the sake of simplicity and efficiency, I recommend that you only have a single dev server instance running at any given time.
Open http://localhost:<port>/ (again, the default port is 3333) in a browser to access the local dev server. You will be presented a list of components from the local project. Click any component to view and work with that component.
IDE Configuration
If not already so, open the Illuminated Cloud project from which the LWC local dev server was started.
In the Illuminated Cloud Project view, right-click on the .localdevserver node and click Mark Directory as>Excluded. This is only necessary once per-project and will ensure that Illuminated Cloud does not attempt to include the local dev server's working files in the project.
Development
While working in local dev server mode, it is recommended that you temporarily disable deploy-on-save in application settings. For traditional projects and SFDX-dev-against-any-org projects, you can do this under Validation and Deployment settings. For scratch org projects, you can do this under Salesforce DX settings.
Now when you save changes to an LWC component in Illuminated Cloud, the LWC local dev server will automatically pick up the changes, recompile the component, and instruct the browser to refresh if appropriate.
Debugging
To debug your components, use the browser's development tools. Compiled component source can be found under:
localhost:<port>/
webruntime/
component/
<id>/dev/<locale>/<namespace>/
<camelCasedComponentName>.js
Future IDE Integration
In a near-term update to Illuminated Cloud I plan to add the following first-class features for LWC local development:
Action to start the LWC local dev server with the project connection's user and a unique port.
Action to open a selected LWC component in the LWC local dev server, starting it first if necessary.
Automatic exclusion of the .localdevserver directory.
Automatic suppression of deploy-on-save for LWC components while working against an LWC local dev server.
Salesforce will also be allowing external tools to customize the way that source code links are handled. Once that extension point is available, you will be able to navigate from the browser back into the corresponding source in Illuminated Cloud.
Once Salesforce includes source maps for compiled LWC components, I'll look into fully-integrated IDE-based debugging of LWC components rendered in the browser.