As developers, you might have to design as well. And no wander you want to verify how the UI looks while you are developing it. Pretty much every front-end framework or library has some sort of local dev server built-in. So do lightning web components. In this blog, I will help you spin up your own local dev server for LWC.
What is a Dev Server ?
A dev server or local dev server, is something that lets you see the UI you are developing locally. It simulates an actual server and serves you the UI on your local network. It also features hot reloads and browser sync. These are just fancy names, but what it means is, if you change something in your code, it automatically reloads to reflect the changes. You don't have to manually reload the preview window.
LWC Local Development
Before we begin, please note that local development for lwc is a beta feature.
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. (source: developer.salesforce.com)
Install NodeJS and Salesforce CLI
If you have not already, install nodejs and salesforce cli. Follow this blog for a step by step process on how to setup your local salesforce development environment.
Install Python
Install python version 3.x. If you are on windows, visit microsoft store and install from there. Otherwise, visit python.org and download the latest version for your operating system. Make sure to add python to your system path. Linux distros comes with python built-in. Run python --version in your terminal irrespective of the operating system to find out the python version in your machine. Make sure it is 3.6 or above.
 |
| check python version |
Install build tools
Depending on the operating system, build tools varies. But basically we need C/C++ compiler tools.
On Unix
- make
- A proper C/C++ compiler toolchain, like GCC
 |
| Installing build-essentials on ubuntu |
On macOS
ATTENTION: If your Mac has been upgraded to macOS Catalina (10.15), please read macOS_Catalina.md.You also need to install the XCode Command Line Tools by running xcode-select --install. Alternatively, if you already have the full Xcode installed, you can find them under the menu Xcode -> Open Developer Tool -> More Developer Tools.... This step will install clang, clang++, and make.
On Windows
- Install windows build tools with npm (documentation)
Start PowerShell as admin and run npm install --global windows-build-tools. Kill the process if it takes too long to finish.
 |
| Install windows build tools with npm |
- Install tools and configuration manually:
Install Visual C++ Build Environment: Visual Studio Build Tools (using "Visual C++ build tools" workload) or Visual Studio Community (using the "Desktop development with C++" workload)
Launch cmd, run npm config set msvs_version 2017
 |
| npm config set msvs_version 2017 |
If the above steps didn't work for you, please visit Microsoft's Node.js Guidelines for Windows for additional tips.
To target native ARM64 Node.js on Windows 10 on ARM, add the components "Visual C++ compilers and libraries for ARM64" and "Visual C++ ATL for ARM64".
Install node-gyp
node-gyp is a cross-platform command-line tool written in Node.js for compiling native addon modules for Node.js. It contains a vendored copy of the gyp-next project that was previously used by the Chromium team, extended to support the development of Node.js native addons. To install open cmd, run npm install --global node-gyp. (documentation)
Now you are ready to preview your lightning web components locally. Follow these steps.
- Open your sfdx project.
- Open any lightning web component folder
- Open the html file
- Right click on the file and select Preview component locally
- Select Browser
If everything has been installed correctly the preview window will be opened in your default browser.
 |
| Example dev server preview |
0 Comments