WSL

Configure WSL

1. Download and install a WSL distribution (for instance, Ubuntu) from Microsoft Store.

   For this step, be sure to use at least Windows 10 or later with the latest “Fall Creators Update” (minimum version 1709, build 16299.15). See the official guide Install the Windows Subsystem for Linux for instructions.

   To work with WSL 2, your Windows version should be 10 build 18917 or later. Follow these instructions to switch the distributive.

2. Run the Linux distribution.

   Upon the first launch, the system may prompt you to enable the Windows optional feature. In this case, you need to do the following:

   • Open Windows PowerShell as Administrator and run

     Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

   • Restart your computer.

Install Node.js and npm

Inside the Linux (Ubuntu) installation, make sure nvm, Node,js, and npm are installed. For the detailed installation instructions, refer to Install Node.js on Windows Subsystem for Linux.

1. Open the Terminal (Alt+F12.

2. Install cURL:

   sudo apt-get install curl

3. Install nvm:

   curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash

4. Install Node.js by running one of the following commands:

   • nvm install --lts to install the stable Long Term Service Node.js version

   • nvm install node to install or the current release version

Create a new project in the WSL file system

1. On the welcome screen, click New Project.

   

2. In the dialog that opens:

   1. Select the project type from the list in the left pane.

   2. In the right pane, specify the project name and location. The project location for WSL will show the absolute path starting with \\wsl$ to the WSL file system.

      

   3. Most often, $instance$ asks you to specify the location of Node.js. Select Download from the list if you have no Node.js yet. Alternatively, select Add to configure a WSL Node.js interpreter.

      

      Then select Add WSL from the popup.

      

      In the Add WSL Node Interpreter dialog that opens, specify the currently used Linux distribution and the path to Node.js.

      

   4. Fill in the other fields in the right pane. The set of the fields depends on the selected project type. See the corresponding articles under Languages and frameworks for details.

3. Click Create.

   

   WebStorm creates a project located in WSL and you can develop and build your project inside the WSL environment without leaving the IDE.

Open a project stored in the WSL file system

In WebStorm, you can directly open a project stored in the WSL file system and work with it like with any other project.

1. Click Open on the Welcome screen or select File | Open from the main menu.

2. In the Select Path dialog that opens, select the folder in the WSL file system that contains the project to open, or type the path to the \\wsl.localhost project location manually.

   

Configure a WSL-based Node.js interpreter

You can set a Node.js installation as the default interpreter for the current project, or you can configure and use this Node.js version in a Node.js Run/Debug configuration.

1. In the Settings dialog (Ctrl+Alt+S) , go to Languages & Frameworks | Node.js.

2. Click next to the Node Interpreter field, in the Node.js Interpreters dialog that opens, click , and then select Add WSL from the list.

   

3. In the Add WSL Node Interpreter dialog that opens, select the Linux distribution you’re using and specify the path to Node.js.

   

   The configured Node.js installation is added to the list and is set as the default for the current project.

   

Run and debug your project

When you run or debug your application, it is run in WSL. If you open the run configuration, note that WebStorm refers to WSL as local machine.

1. Create a run/debug configuration of the appropriate type, depending on the type of your application. To do that, go to Run | Edit Configurations. Then in the Run/Debug Configurations dialog, click on the toolbar and select the required run/debug configuration type. In the dialog that opens, fill in the fields as necessary or accept the predefined values.

   

2. To run your application, from the Run widget select the newly created run/debug configuration, and click next to it.

3. To debug your application, set the breakpoints where necessary, from the Run widget select the newly created run/debug configuration, and click next to it.