WebStorm
 
2023.1
Shortcuts: Windows
Get WebStorm
  1. Running, debugging, testing, and deploying applications
  2. Running

Run applications

Last modified: 25 April 2023

With WebStorm, you can run entire applications, single scripts, or tests right from the editor, using the context menu or gutter icons. If you need to pass some parameters to your application or launch a tool, for example, an npm script, before running, create a language- or framework-specific Run/Debug Configuration and invoke it.

All the run configurations that are currently available in a project, are shown in the Select Run/Debug Configuration list.

Learn more from Run/debug configurations.

If you want to see the list of all currently running applications, select Run | Show Running List from the main menu. Refer to the Show running processes section for details.

After a run session starts, the App toolwindows tool window run icon in the Run tool window and in the Run/Debug Configuration Selector toggles to Active run icon.

tip

You can configure some tools (for example, npm scripts) to be launched before running. In this case, WebStorm runs the tools, and after success will run the application. Otherwise, the application starts immediately.

Quick way

Run from the editor

If you are not going to pass any parameters to your program, and your program does not require any specific actions to be performed before start, you can run it right from the editor.

  • To run client-side JavaScript code in the browser, open the HTML page that references it.

    WebStorm has a built-in web server that can be used to preview and debug your application. This server is always running and does not require any manual configuration. All the project files are served on the built-in server with the root URL http://localhost:<built-in server port>/<project root>, with respect to the project structure.

    1. In the editor, open the HTML file with the JavaScript reference, hover your mouse pointer over the code to show the browser icons bar: the WebStorm icon Chrome Firefox Safari Opera Internet Explorer Edge, and then click the icon that indicates the desired browser. See Preview output of HTML files.

    2. Alternatively:

      Open the HTML file with the JavaScript reference in the editor or select it in the Project tool window, and then select Run <HTML file name> from the context menu.

      Run client JavaScript

      WebStorm creates a temporary run/debug configuration of the type JavaScript Debug which you can later save, see Saving a temporary configuration as permanent.

  • To run a script, open it in the editor or select it in the Project tool window, and then select Run <script file name> from the context menu.

    Run script

    WebStorm creates a temporary run/debug configuration of the type Node.js.

  • To run a test, click the gutter icon next to it or press Ctrl+Shift+F10. The gutter icon changes depending on the state of your test, see Performing tests and framework-specific pages under Testing JavaScript.

    Run single test from the editor

  • To run an npm, Yarn, or pnpm script:

    1. Open package.json, click Run in the gutter next to the script, and choose Run <script_name>, see Running and debugging scripts from package.json.

    2. Alternatively:

      Use the npm tool window.

    Learn more from Running and debugging scripts.

Run the current file

On top of running applications from the editor, you can run single files using a dedicated option on the toolbar. The run and debug buttons are active and allow you to instantly run the currently opened file.

  1. In the editor, open the file that you want to run.

  2. Click Run next to the Current File option on the toolbar.

    Running a single file from the toolbar

You can access other runners from the submenu as well: expand the list and click the right arrow next to Current File. From the menu that opens, you can debug the code, run it with coverage, or open the run configuration to specify more options.

More options for running current file

Customizable way

Use a run/debug configuration

If you are going to pass parameters to your program, add VM options (for example, to allow remote debugging), or otherwise customize the startup of your program, use a run/debug configuration.

  1. Create a run/debug configuration.

  2. On the main toolbar, select the run/debug configuration you are going to use.

    Run configuration selector

  3. Click The Run button or press Shift+F10.

When the application starts, you can view its output and interact with it in the Run tool window. Every run/debug configuration creates a separate tab when you run it.

Tabs in the Run tool window

tip

Use the Ctrl+F shortcut to search for text occurrences in the console output.

To learn more about tool windows and how to manage them, see the Tool windows topic.

Re-run applications

tip

If you re-run an application, the output of the previous run is lost. To preserve the output of an application, click the Pin Tab button on the toolbar of the Run tool window. When a tab is pinned, new sessions are opened in another tab.

Stop and pause applications

When you stop a program, its process is interrupted and exits immediately. When you pause a program, it continues running in the background, but its output is suspended.

Stop a program

  • In the Run tool window, click the Stop button on the toolbar. Alternatively, press Ctrl+F2 and select the process to stop.

Pause a program

  • Right-click in the Run tool window and select Pause Output from the context menu. Use the same toggle to resume the program.

    Pause output

note

Only the output is suspended. Pausing the output does not affect the execution of the program.

Show running processes

You can view the list of all active run or debug sessions and navigate between them.

See also

Concepts