Error while installing lwc local server? Here is how to resolve it!!

Hello Trailblazers,

I received a couple of comments from fellow trailblazers who were following my LWC ToDo App Project Tutorial Series that they were not able to setup local dev server to preview their LWC component locally. I remember that I faced some issues as well while setting that up, so I decided to install the local dev server myself again with the latest version of node and sfdx, so that I can explain the resolution to common issues. Let's talk about the pre requisites first of all.

Pre Requisites

There are some pre requisites to setup local dev server in your system for lwc. Please follow the below steps to make sure you have that covered.

1. Install Node Js. Download it here: https://nodejs.org

2. Install SFDX CLI. Download it here: https://developer.salesforce.com/tools/sfdxcli

Once you've downloaded and installed the above tools in your system. You can try setting up the local dev server. Open terminal/cmd and run the below command to install lwc local dev server:

As you run the above command, it should automatically install the local dev server in your system. If not, you may face some common issues. I am sharing the issues I faced and their resolution as well below:

1. npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'

In case you're facing this issue or any similar permission issue, that means you don't have access to make changes in the required folder whose path is provided to you. A simple solution for this is to run the same install command again by running CMD as an Administrator in case of windows, you can also try opening the folder manually as the path is given to you and check it's permissions manually in folder properties and provide Full Access permissions from there to your user. In case of mac, running the command prefixed with sudo should do the job for you.

2. node-gyp not found! Please ensure node-gyp is in your PATH--

This issue is mainly related to the node-gyp module which should be installed globally in your system. The lwc local server has a dependency on this module. You can install the module by running the below command:

In case you face some permission issues while running the above command, I have already given the resolution above. In windows, run cmd as an administrator and try running the command again. In mac/linux, you can try running the command by prefixing it with sudo as: sudo npm install -g node-gyp and it should work fine.

I faced the above two issues and resolved them quickly by taking the steps mentioned. Do you face any issue apart from this? Make sure to share it in the comments below and also the resolution for the same if you've got it resolved. I'll update the post according to your comments so that it's easier for others to get these issues sorted.

Once your lwc local server is installed, you can preview your components locally by right clicking a lwc component in VSCode and selecting SFDX:Preview Component Locally and choose the Desktop Browser to preview component from the next option.

You should have the component preview in local server as shown below:

Happy Trailblazing..!!