Node.js with Vagrant

Make sure the JavaScript and TypeScript, JavaScript Debugger, Node.js, and Node.js Remote Interpreter required plugins are enabled on the Settings | Plugins page, tab Installed, see Managing plugins for details.

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

Make sure Vagrant and Oracle's VirtualBox are downloaded, installed, and configured on your computer, see Vagrant: Working with Reproducible Development Environments for details.

Make sure that the parent folders of the following executable files are added to the system PATH variable:

• vagrant.bat or vagrant from your Vagrant installation. This should be done automatically by the Vagrant installer.

• VBoxManage.exe or VBoxManage from your Oracle's VirtualBox installation.

To have Node.js executable in your Vagrant environment, you can start with a ready-to-use Vagrant box, for example, jandir/nodejs.

Open the embedded Terminal (Alt+F12) and run the following commands:

vagrant init jandir/nodejs
vagrant up

Open the Settings dialog (Ctrl+Alt+S) and go to Languages & Frameworks | Node.js.

Click next to the Node interpreter field.

In the Node.js Interpreters dialog with a list of all the currently configured interpreters, click on the toolbar and select Add Remote from the context menu .

In the Configure Node.js Remote Interpreter dialog that opens, select Vagrant.

Specify the Vagrant instance folder that points at the environment you are going to use.

Technically, it is the folder where the VagrantFile configuration file for the desired environment is located. Based on this setting, PhpStorm detects the Vagrant host and shows it as a link in the Vagrant Host URL read-only field.

By default, the field shows the current project folder.

In the Node.js interpreter path field, specify the location of the Node.js executable file.

To locate the Node.js executable, open the embedded Terminal (Alt+F12) and type:

vagrant ssh
whereis node
exit

Click OK to return to the Node.js Interpreters dialog where the new interpreter is added to the list.

To set the newly configured interpreter as project default, select it in the list and click OK to return to the Node.js dialog.

PhpStorm automatically uses this interpreter every time you select the Project alias from Node Interpreter lists, for example, when creating run/debug configurations.

Specify the path to the package manager to use.

To locate the package manager, open the embedded Terminal (Alt+F12) and type:

vagrant ssh
whereis <package manager>
exit

From the main menu, select Run | Edit Configurations. In the Edit Configuration dialog that opens, click on the toolbar and select Node.js from the context menu. The Run/Debug Configuration: Node.js dialog opens.

In the JavaScript File field, specify the path to the file that starts the application.

If necessary, specify some optional settings as described in Running and debugging Node.js applications.

From the Node interpreter list, select the relevant remote Node.js interpreter in a Vagrant environment.

Alternatively, click next to the Node interpreter field . The Node.js Interpreters dialog opens.

Click on the toolbar and select Add Remote from the context menu.

Configure a remote Node.js interpreter in a Vagrant environment as described above.

Click OK to save the run/debug configuration.

Create a Node.js run/debug configuration with a Node.js interpreter in a Vagrant environment as described above.

Select the newly created Node.js configuration from the Select run/debug configuration list on the toolbar and click the Run button () next to the list.

Gif

Put breakpoints in your code as necessary.

Create a Node.js run/debug configuration with a Node.js interpreter in a Vagrant environment as described above.

Select the newly created Node.js configuration from the Select run/debug configuration list on the toolbar and click the Debug button () next to the list.

In the Debug tool window that opens, proceed with the debugging session — step through the breakpoints, switch between frames, change values on-the-fly, examine a suspended program, evaluate expressions, and set watches.

Gif