WebStorm 2024.3 Help

Nx

WebStorm integrates with the Nx build system optimized for monorepos with built-in tooling for code scaffolding, module boundary enforcement, automated updates and advanced CI capabilities with caching and distribution.

WebStorm provides you with a dedicated Nx Console tool window and an Nx run/debug configuration for running and debugging your scripts.

If you are using Karma for testing, you can also specify the Nx package as Karma package in Karma run/debug configurations.

Before you start

  1. Make sure you have Node.js on your computer.

  2. Install and enable the Nx Console plugin on the Settings | Plugins page, tab Marketplace, as described in Installing plugins from JetBrains Marketplace.

Create an NX workspace

  1. Click New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

  2. In the left-hand pane, choose Nx.

  3. In the right-hand pane:

    • Specify The path to the folder where the project-related files will be stored.

    • In the Node Interpreter field, specify the Node.js interpreter to use. Select a configured interpreter from the list or choose Add to configure a new one.

    • From the Command list, select npx create-nx-workspace @latest.

    Create an Nx workspace
  4. Click Create and answer the questions in the wizard. Based on these answers, a workspace is created and set up.

    Questions in the wizard answered. Nx workspace generation in progress
  5. Click the link to go to the authorization page.

    Authorization link

Nx console tool window

The Nx Console tool window provides you with information about your workspace. It lists all your projects and the targets that can be run for them, such as build, serve, test, lint, and any configuration you have set up.

From the context menu of a target, you can run or debug the target as well as edit the dedicated run/debug configuration for it.

Nx Console tool window
  1. To open the Nx Console tool window, click

    the Nx Console tool window bar
    on the sidebar or go to View | Tool Windows | Nx Console on the main menu.

  2. To view a list of the projects and targets shown, click Refresh Workspace or click the Reload Nx Projects icon on the toolbar of the tool window.

    Refresh Workspace

Run and debug Nx targets

You can run and debug Nx targets from the Nx Console tool window or via a dedicated Nx run/debug configuration.

Run targets

  • In the Nx Console tool window, select a target and then select Run '<target_name>' from its context menu.

    Nx tool window: Run target
  • From the Run widget on the toolbar, select the configuration with the name of the target and click the Run icon next to it.

    Run target via run/debug configuration

Debug targets

  1. Set the breakpoints in your script where necessary.

  2. In the Nx Console tool window, select a target and then select Debug '<target_name>' from its context menu.

    Nx tool window: Debug target

    Alternatively, from the Run widget on the toolbar, select the configuration with the name of the target and click the Debug icon next to it.

    Debug target via run/debug configuration

Edit run/debug configurations for targets

  1. Do one of the following:

    • In the Nx Console tool window, select a target and then select Edit '<target_name> from its context menu.

      Nx console tool window: Edit run/debug configuration
    • From the Run widget on the main toolbar, select Edit Configurations, and then select the appropriate configuration from the list.

      Edit run/debug configuration - run widget

    The Edit run/debug configuration: <target name> dialog opens.

  2. Update the default auto-generated settings and save the run/debug configuration.

Last modified: 02 October 2024