WebStorm 2016.2 Help

Creating a Project Using Yeoman Generator

WebStorm supports integration with the Yeoman tool and provides interface for using it in generating framework-specific project stubs.

On this page:

Before you start

  1. Download and install Node.js. The runtime environment is required for two reasons:
    • The Yeoman tool is started through Node.js.
    • NPM, which is a part of the runtime environment, is also the easiest way to download the Yeoman tool.
  2. If you are going to use the command line mode, make sure the path to the parent folder of the Node.js executable file and the path to the npm folder are added to the PATH variable. This enables you to launch the Yeoman tool and npm from any folder.
  3. Make sure the Yeoman and the NodeJS plugins are installed and enabled. The plugins are bundled with WebStorm and activated by default. If the plugins are not activated, enable them on the Plugins page of the Settings / Preferences Dialog as described in Enabling and Disabling Plugins.

Installing Yeoman

The easiest way to install Yeoman is to use the Node Package Manager (npm), which is a part of Node.js. Yeoman can be installed both globally or locally, in a project. It is recommended that you install globally because in this case you can run it from any folder but not from its installation folder.

WebStorm provides interface for global and local installation modes. Alternatively, you can install Yeoman manually through the command line.

To install Yeoman from WebStorm using the Node.js and NPM page of the Settings dialog box:

  1. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or WebStorm | Preferences for OS X, and click Node.js and NPM under Languages&Frameworks.
  2. On the Node.js and NPM page that opens, the Packages area shows all the Node.js-dependent packages that are currently installed on your computer, both at the global and at the project level. Click add.
  3. In the Available Packages dialog box that opens, select the yo package from the list.
  4. For global installation, select the Options check box and type -g in the text box next to it.
  5. Click Install Package to start installation.

To run the installation from the command line:

  1. Launch the embedded Terminal by hovering your mouse pointer over show_tool_window_bars in the lower left corner of WebStorm and choosing Terminal from the menu (see Working with Embedded Local Terminal for details).
  2. Type the following command at the command line prompt:
    npm install -g yo
    where -g means global installation

Configuring a list of project stub generators

  1. Choose File | New Project on the main menu or click the New Project button on the Welcome screen. The New Project Dialog dialog box opens.
  2. In the left-hand pane, choose Yeoman.
  3. The right-hand pane shows all the previously installed Yeoman generators. Click Install Generator.
  4. From the dialog box that opens showing all the available generator packages, select the required package in the left-hand pane and click the Install Generator button that appears in the right-hand pane. You can install several packages one after another without leaving the dialog box.

    When the installation is over, click Close to return to the list of generators which is already expanded with the newly added package.

Creating a project by a generator

  1. Choose File | New Project on the main menu or click the New Project button on the Welcome screen. The New Project Dialog dialog box opens.
  2. In the left-hand pane, choose Yeoman.
  3. The right-hand pane shows all the previously installed Yeoman generators. To expand the list, click Install Generator, see Creating a Project Using Yeoman Generator above.

    Select the required generator from the list and click Next.

  4. Specify the required settings in the New Project wizard that starts. The number of pages and their contents depend on the chosen generator.
  5. On the last page of the wizard, select or clear the Run npm install&bower install check box to specify whether you want to run Node Package Manager and Bower to install the packages that are required for developing the new project.
  6. Click Next and choose to open the new project in the current window or in the new one.

See Also

Last modified: 2 September 2016