Run/debug configurations

WebStorm uses run/debug configurations to run, debug, and test your code. Each configuration is a named set of startup properties that define what to execute and what parameters and environment should be used.

There are two types of run/debug configurations:

Temporary — created every time you select Run <item_name> from the context menu. To call the context menu, right-click an object or an area.
Permanent — created explicitly from a template or by saving a temporary configuration. Permanent configurations remain as part of your project until you remove them.

So whenever you run/debug or test your code, WebStorm either uses an existing permanent run/debug configuration or creates a new temporary one.

Permanent configurations have opaque icons while the icons of temporary configurations are semi-transparent. The red cross over the configuration icon indicates an error in configuration settings.

The maximum number of temporary configurations is 5. The older ones are automatically deleted when new ones are added. If necessary, you can increase this limit in Settings | Advanced Settings | Run/Debug | Temporary configurations limit.

Permanent and temporary configurations have different icons

Create permanent run/debug configurations

WebStorm provides the following ways to create a permanent run/debug configuration:

Save a temporary run/debug configuration as permanent.
Create from a template or copy an existing configuration.

Save a temporary configuration as permanent

Select a temporary configuration in the run/debug configuration switcher, click , and select Save Configuration.
Alternatively, select a temporary configuration in the Run/debug configurations dialog and click on the toolbar.
Open the Edit Configurations dialog (Run | Edit Configurations), select the temporary configuration to save, and click on the toolbar.

WebStorm provides run/debug configuration templates for different languages, tools, and frameworks. The list of available templates varies depending on the installed and enabled plugins.

Create a run/debug configuration from a template

Go to Run | Edit Configurations. Alternatively, press Alt+Shift+F10, then 0.
In the Run/Debug Configurations dialog, click on the toolbar or press Alt+Insert. The list shows the run/debug configuration templates.
Select the desired template. If you are not sure which template to choose, refer to Run/debug configurations dialog for more information on particular templates.
Specify the run/debug configuration name in the Name field. This name will be shown in the list of the available run/debug configurations.
Select Allow multiple instances if you want to allow multiple instances of the configuration to run at the same time. If this option is disabled, attempting to re-run the configuration will terminate the active session.
Configure the run/debug configuration parameters. The list of mandatory and optional parameters may vary depending on the selected run/debug configuration type.
Some optional parameters are hidden. To view and enable them, click the Modify options link.
For the detailed description of the selected template, see the respective section of run/debug configurations reference.
In the Before launch section, define whether you want to perform any specific actions before launching the application, for example, execute some tools or scripts prior to launching the run/debug configuration.
For more information about particular Before launch activities, refer to Before launch
You can either run the configuration right away or save the configuration to run it later.
- Click OK to save the run configuration for later and close the dialog.
- To run the configuration right away, click Run.

Before launch

In this area, you can specify tasks to be performed before starting the selected run/debug configuration. The tasks are performed in the order they appear in the list.

Item	Shortcut	Description
	`Alt+Insert`	Click this icon to add one of the following available tasks: Run External tool: select to run an external application. In the dialog that opens, select one or multiple applications you want to run. If it is not defined in WebStorm yet, add its definition. For more information, refer to External tools and External Tools. Run Another Configuration: select to execute another run/debug configuration and wait until it finishes before starting the current configuration. If you want to run several configurations in parallel, use a compound run/debug configuration. Launch Web Browser: select this option to have a browser started. In the dialog that opens, select the type of the browser and provide the start URL. Also, specify if you want the browser be launched with JavaScript debugger. Run File Watchers: select this option to have WebStorm apply all the currently active File Watchers. Run Grunt task: select this option to run a Grunt task. In the Grunt task dialog that opens, specify the Gruntfile.js where the required task is defined, select the task to execute, and specify the arguments to pass to the Grunt tool. Specify the location of the Node.js interpreter, the parameters to pass to it, and the path to the grunt-cli package. Run gulp task: select this option to run a Gulp task. In the Gulp task dialog that opens, specify the Gulpfile.js where the required task is defined, select the task to execute, and specify the arguments to pass to the Gulp tool. Specify the location of the Node.js interpreter, the parameters to pass to it, and the path to the gulp package. Run npm script: select this option to execute an npm script. In the NPM Script dialog that opens, specify the npm run/debug configuration settings. Start React Native Bundler: select this option to run the bundler automatically, as part of a running or debugging session. By default, this is done through `react-native start`. If your application uses Expo, you need to run the development server via the `start` npm task. To do that, click , then in the Configure React Native dialog, choose npm script and select start from the list. Compile TypeScript: select to run the built-in TypeScript compiler and thus make sure that all the changes you made to your TypeScript code are reflected in the generated JavaScript files. In the TypeScript Compile Settings dialog that opens, select or clear the Check errors checkbox to configure the behaviour of the compiler in case any errors are detected: If the Check errors checkbox is selected, the compiler will show all the errors and the run configuration will not start. If the Check errors checkbox is cleared, the compiler will show all the detected errors but the run configuration still will be launched. Generate CoffeeScript Source Maps: select this option to generate the source maps for your CoffeeScript sources. In the dialog that opens, specify where your CoffeeScript source files are located. Upload files to Remote Host: select this option to have the application files automatically uploaded to the server according to the default server access configuration.
	`Alt+Delete`	Click this icon to remove the selected task from the list.
	`Enter`	Click this icon to edit the selected task. Make the necessary changes in the dialog that opens.
	`Alt+Up` `Alt+Down`	Click these icons to move the selected task one line up or down in the list. The tasks are performed in the order that they appear in the list.
Show this page		Select this checkbox to show the run/debug configuration settings prior to actually starting the run/debug configuration.
Activate tool window		By default this checkbox is selected and the Run or the Debug tool window opens when you start the run/debug configuration. Otherwise, if the checkbox is cleared, the tool window is hidden. However, when the configuration is running, you can open the corresponding tool window for it yourself by pressing `Alt+4` or `Alt+5`.

If you are working in a team, you might want to share your run/debug configurations so that your teammates could run the application using the same configuration or enable them to remotely attach to the process you are running.

For these purposes, WebStorm provides a mechanism to store your run/debug configurations as project files and share them through VCS. The same mechanism can also be used when you want to send your configuration as a file to someone else. This saves a lot of time as run/debug configurations sometimes get sophisticated, and keeping them in sync manually would be tedious and error-prone.

Go to Run | Edit Configurations. Alternatively, press Alt+Shift+F10, then 0.
Select the run/debug configuration you want to share, enable the Store as project file option, and specify the location where the configuration file will be stored.
You can configure any location unless compatibility with WebStorm 2019.3 and earlier is required. For compatibility with these versions, store the file in the suggested location.
(Optional) If the .idea directory is added to VCS ignored files, the .idea/runConfigurations subfolder will be ignored, too. If you use Git for your project, you can share .idea/runConfigurations only and leave .idea ignored by modifying .gitignore as follows:
/.idea/* !/.idea/runConfigurations

Run/debug configuration templates

All run/debug configurations are based on templates, which implement the startup logic, define the list of parameters and their default values. The list of available templates is predefined in the installation and can only be extended via plugins. However, you can edit default parameter values in each template to streamline the setup of new run/debug configurations.

Configure the default values for a template

Go to Run | Edit Configurations. Alternatively, press Alt+Shift+F10, then 0.
In the left-hand pane of the run/debug configuration dialog, click Edit configuration templates.
In the Run/Debug Configuration Templates dialog that opens, select a configuration type.
Specify the desired default parameters and click OK to save the template.

Alternatively, select File | New Projects Setup | Run Configuration Templates from the main menu or press Shift twice and start typing Templates for New Projects.

Create a run/debug configuration template

In the dialog that opens, select the configuration type and specify the desired parameters in the right-hand pane.

Run/debug configuration folders

When there are many run/debug configurations of the same type, you can group them in folders, so they become easier to distinguish visually.

Once grouped, the run/debug configurations appear in the list under the corresponding folders.

Create a folder for run/debug configurations

Go to Run | Edit Configurations. Alternatively, press Alt+Shift+F10, then 0.
In the Run/Debug Configurations dialog, select a configuration type and click on the toolbar. A new empty folder for the selected type is created.
Specify the folder name in the text field to the right or accept the default name.
Select the desired run/debug configurations and move them under the target folder.
Apply the changes. If a folder is empty, it will not be saved.

When you no longer need a folder, you can delete it Delete. The run/debug configurations grouped under this folder will be moved under the root of the corresponding run/debug configuration type.