WebStorm 2017.1 Help

New Project Dialog

File | New Project

Welcome Screen | Create New Project

Use this dialog box to create empty projects or generate framework-specific project stubs for developing applications.

The left-hand pane of the dialog box shows a list of project types for which stubs can be generated. The set of available project types depends on the installed and activated plugins. The contents of the right-hand pane depend on the selected project type. The field Location is common for all project types.

Project type Description
Empty Project Choose this option to get just a project folder without any contents. Specify the path to the project folder in the Location text box and click Create.
Angular CLI The feature is supported only when the NodeJS and AngularJS 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.

Choose this option to get a stub where later you can automatically generate specific structures, such as Classes, Components, Routes, Pipes, Services, etc. using the Angular CLI command line interface.

In the right-hand pane:

  1. In the Location text box, specify the path to the project folder where the project-related files will be stored.
  2. In the Node Interpreter field, specify the NodeJS interpreter to use. Choose a configured interpreter from the drop-down list or choose Add to configure a new one, see Configuring Node.js Interpreters
  3. In the Angular CLI field, specify the path to the angular-cli package.

AngularJS The feature is supported only when the NodeJS and AngularJS 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.

Choose this option to have the project structure set up and some sources generated based on the AngularJS framework template.

In the right-hand pane, in the Location text box, specify the path to the project folder where the project-related files will be stored.

Foundation The feature is supported only when the JavaScript Support plugin is installed and 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.

Choose this option to have the project structure set up and some sources generated based on the Foundation framework template.

In the right-hand pane:

  1. In the Location text box, specify the path to the project folder where the project-related files will be stored.
  2. From the Version drop-down list, choose the template version to use and click Create.

Dart The feature is supported only when the Dart plugin is installed and 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.

Choose this option to have the project structure set up and some sources generated for a Dart application.

HTML5 Boilerplate The feature is supported only when the JavaScript Support plugin is installed and 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.

Choose this option to have the project structure set up and some sources generated based on the HTML5 Boilerplate template.

In the right-hand pane:

  1. In the Location text box, specify the path to the project folder where the project-related files will be stored.
  2. From the Version drop-down list, choose the template version to use and click Create.

Meteor App The feature is supported only when the Meteor plugin is installed and 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.

Choose this option to have the project structure set up and some sources generated based on the Meteor frameworks.

In the right-hand pane:

  1. In the Location text box, specify the path to the project folder where the project-related files will be stored.
  2. Specify the location of the Meteor executable file (see Installing Meteor).
  3. From the Template drop-down list, choose the sample to generate. To have a basic project structure generated, choose the Default option.
  4. In the Filename text box, type the name for the mutually related .js, .html, and .css files that will be generated. The text box is available only if the Default sample type is selected from the Template drop-dow list.

Node.js Express App The feature is supported only when the Node.js plugin is installed and 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.

Choose this option to have the project structure set up and some project sources generated based on the Express framework.

In the right-hand pane:

  1. In the Location text box, specify the path to the project folder where the project-related files will be stored.
  2. The path to the Node.js executable file node.exe and to the Node.js package manager file npm.cmd.
  3. The Express template engine to use. From the Template engine drop-down list, choose one of the following:
  4. The CSS engine to use. From the CSS engine drop-down list, choose one of the following:

PhoneGap/Cordova App The feature is supported only when the PhoneGap/Cordova plugin is installed and 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.

Choose this option to have the project structure set up and some sources generated based on the PhoneGap, Apache Cordova, and Ionic frameworks.

In the right-hand pane:

  1. In the Location text box, specify the path to the project folder where the project-related files will be stored.
  2. Specify the location of the executable file phonegap.cmd, or cordova.cmd, or ionic.cmd (see Installing PhoneGap/Cordova/Ionic).

React App The feature is supported only when the JavaScript Support plugin is installed and 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.

Choose this option to have the project structure set up and some sources generated according to the React requirements.

In the right-hand pane:

  1. In the Location text box, specify the path to the project folder where the project-related files will be stored.
  2. In the Node Interpreter field, specify the NodeJS interpreter to use. Choose a configured interpreter from the drop-down list or choose Add to configure a new one, see Configuring Node.js Interpreters
  3. In the Angular CLI field, specify the path to the create-react-app package.

React Native The feature is supported only when the JavaScript Support plugin is installed and 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.

Choose this option to get a stub for developing a React Native application.

In the right-hand pane:

  1. In the Location text box, specify the path to the project folder where the project-related files will be stored.
  2. In the Node Interpreter field, specify the NodeJS interpreter to use. Choose a configured interpreter from the drop-down list or choose Add to configure a new one, see Configuring Node.js Interpreters
  3. In the Angular CLI field, specify the path to the react-native-cli package.

Twitter Bootstrap The feature is supported only when the JavaScript Support plugin is installed and 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.

Choose this option to have the project structure set up and some sources generated based on the Twitter Bootstrap template.

In the right-hand pane:

  1. In the Location text box, specify the path to the project folder where the project-related files will be stored.
  2. From the Version drop-down list, choose the template version to use and click Create.

Web Starter Kit The feature is supported only when the JavaScript Support plugin is installed and 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.

Choose this option to have the project structure set up and some sources generated in accordance with the Web Starter Kit requirements.

In the right-hand pane:

  1. In the Location text box, specify the path to the project folder where the project-related files will be stored.
  2. From the Version drop-down list, choose the template version to use and click Create.

Yeoman The feature is supported only when the Yeoman plugin is installed and 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.

Choose this option to get interface for generating framework-specific project stubs using the Yeoman tool.

The right-hand pane shows all the previously installed Yeoman generators. Select the required generator from the list, click Next, and proceed as described in Creating a Project Using Yeoman Generator.

See Also

Last modified: 17 July 2017