Running NPM Scripts
WebStorm provides interface for running npm scripts. npm scripts support involves:
package.jsonfiles, recognizing definitions of scripts.
- Building trees of scripts.
Navigation between a script in the tree and its definition in the
- Running scripts.
- Configuring the script execution mode and output.
On this page:
- Before You Start
- Building a Tree of Scripts
- Running npm Scripts from the Tree of Scripts
- Running Tasks According to a Run Configuration
- Running npm Scripts Automatically
Before You Start
- Download and install Node.js which contains npm.
- Make sure the NodeJS plugin is enabled. The plugin is bundled with WebStorm and activated by default. If the plugin is not activated, enable it on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.
package.jsonfile with the
scriptsproperty with the definitions of the scripts to run.
npm scripts are launched in two ways:
From a tree of scripts in the dedicated NPM Tool Window.
The tool window opens when you invoke npm by choosing Show npm Scripts
on the context menu of a
package.jsonin the Project tool window or of a
package.jsonopened in the editor.
- According to a dedicated run configuration, see Run/Debug Configuration: NPM.
The result of executing a script is displayed in the Run tool window. The tool window shows the npm script output, reports the errors occurred, lists the packages or plugins that have not been found, etc. The name of the last executed script is displayed on the title bar of the tool window.
Building a Tree of Scripts
If the npm tool window is not opened yet, do one of the following:
Select the required
package.jsonfile in the Project tool window and choose Show npm Scripts on the context menu of the selection.
Open the required
package.jsonfile in the editor and choose Show npm Scripts on the context menu of the editor.
- Select the required
If the npm tool window is already opened, click on the toolbar and
choose the required
package.jsonfile from the list. WebStorm adds a new node and builds a scripts tree under it. The title of the node shows the path to the
package.jsonfile according to which the tree is built.
- To re-build a tree, switch to the required node and click on the toolbar.
Running npm Scripts from the Tree of Scripts
To run a script, do one of the following:
- To run several scripts, use the multiselect mode: hold Shift (for adjacent items) or Ctrl (for non-adjacent items) keys and select the required scripts, then choose Run on the context menu of the selection.
Running Tasks According to a Run Configuration
Besides using temporary run configurations that WebStorm creates automatically, you can create and launch your own npm run configurations. For details about run configurations, see Run/Debug Configuration and Creating and Editing Run/Debug Configurations.
- Choose on the main menu. Alternatively, click Shift+Alt+F10 and select Edit Configuration from the pop-up menu.
- Click the Add New Configuration button on the toolbar and select npm from the pop-up list.
In the Run/Debug Configuration: NPM dialog box that opens, specify the name of the run configuration,
the npm command line command to execute, the scripts to run (use blank spaces as separators),
the location of the
package.jsonfile to retrieve the definitions of the scripts from, and the command line arguments to execute the script with.
Specify the location of the Node executable file and the NodeJS-specific options to be passed to this executable file, see Node parameters for details.
If applicable, specify the environment variables for the NodeJS executable file.
To run a script according to a run configuration, select the run configuration from the list on the main tool bar and then choose on the main menu or click the Run toolbar button . The output is displayed in the Run tool window.
Running npm Scripts Automatically
If you have some scripts that you run on a regular basis, you can add the corresponding run configurations to a list of startup tasks. The tasks will be executed automatically on the project start-up.
- Open the Settings / Preferences Dialog by choosing for Windows and Linux or for OS X, and click Startup Tasks under Tools.
- On the Startup Tasks page that opens, click on the toolbar.
From the drop-down list, choose the required npm run configuration. The configuration is added to the list.
If no applicable configuration is available in the project, click and choose Edit Configurations. Then define a configuration with the required settings in the Run/Debug Configuration: NPM page that opens. When you save the new configuration it is automatically added to the list of startup tasks.