Create New Project dialog

Empty Project

Choose this option to get just a project folder without any contents. Specify the path to the project folder in the Location field and click Create.

Angular CLI

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

In the right-hand pane:

1. Specify the path to the folder where the project-related files will be stored.

2. In the Node Interpreter field, specify the Node.js interpreter to use. Select a configured interpreter from the list or choose Add to configure a new one.

3. From the Angular CLI list, select npx --package @angular/cli ng.

   Alternatively, for npm version 5.1 and earlier, install the @angular/cli package yourself by running npm install -g @angular/cli in the Terminal Alt+F12. When creating an application, select the folder where the @angular/cli package is stored.

4. Optionally:

   • In the Additional parameters field, specify the extra ng new options to pass to Angular CLI. Code completion is available in this field: as you start typing the name of an option or press Ctrl+Space, WebStorm shows you the available options and their description.

   • If you are using Angular version 16 or later, you can also select the Create new project with standalone components checkbox. Learn more from the Angular official website.

Bootstrap

Select this option to create a project, set up its structure, and generate some sources based on the Bootstrap template.

In the right-hand pane:

1. Specify the path to the folder where the project-related files will be stored.

2. From the Version list, choose the template version to use and click Create.

Cordova

Select this option to have the project structure set up and some sources generated based on the PhoneGap or Apache Cordova framework. Learn more from PhoneGap and Cordova.

In the right-hand pane:

1. Specify the path to the folder where the project-related files will be stored.

2. Specify the location of the executable file. Depending on your operating system and target platform, this can be phonegap, phonegap.cmd, cordova, or cordova.cmd.

Dart

Select this option to have the project structure set up and some sources generated for a Dart application. For more information, refer to Dart.

Express

Select 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. Specify the path to the folder where the project-related files will be stored.

2. The Node interpreter, refer to Configuring a local Node.js interpreter.

3. The package manager to use - npm or Yarn, refer to npm, pnpm, and Yarn.

4. The express -generator.

   It is recommended that you use npx that downloads and runs the generator. To do that, select npx --package express-generator express from the express -generator list.

   Alternatively, open the embedded Terminal (Alt+F12) and type npm install --g express-generator and then select the downloaded generator from the express-generator list.

5. The Express template engine to use. From the Template engine list, choose one of the following:

   • Dust

   • EJS

   • Handlebars

   • Hogan.js

   • Pug (Pug(Jade))

   • Twig

   • Vash

   • Static html

6. The CSS engine to use. From the CSS engine list, choose one of the following:

   • Plain CSS

   • Stylus

   • Less

   • Sass.

HTML5 Boilerplate

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

To start using HTML5 Boilerplate in an existing project, download the latest stable release from the HTML5 Boilerplate official website and extract it in your project. Alternatively, open the embedded Terminal (Alt+F12) and type npm install html5-boilerplate at the command prompt.

In the right-hand pane:

1. Specify the path to the folder where the project-related files will be stored.

2. From the Version list, choose the template version to use and click Create.

Meteor

Select this option to have the project structure set up and some sources generated based on the Meteor framework. Learn more from Meteor.

In the right-hand pane:

1. Specify the path to the folder where the project-related files will be stored.

2. Specify the location of the Meteor executable file (refer to Installing Meteor).

3. From the Template list, choose the sample to generate. To have a basic project structure generated, choose the Default option.

4. In the Filename field, type the name for the mutually related .js, .html, and .css files that will be generated. The field is available only if the Default sample type is selected from the Template drop-dow list.

Next.js

Select this option to have the project structure set up and some sources generated based on the Next.js framework.

In the right-hand pane, specify the name of the project and the folder to create it in, the Node,js interpreter to use, and the create-next-app package to use (it is recommended that you select npx create-next-app from the list). Learn more from Next.js.

Node.js

Select this option to start a simple Node.js application. WebStorm just runs the npm init command that adds a package.json file and enables code completion for Node.js core APIs.

In the right-hand pane, specify the project folder and the Node.js interpreter to use. For more information, refer to Configuring a local Node.js interpreter.

React

In the left-hand pane, choose Vite.

In the right-hand pane:

1. Specify the path to the folder where the project-related files will be stored.

2. In the Node Interpreter field, specify the Node.js interpreter to use. Select a configured interpreter from the list or choose Add to configure a new one.

3. From the Vite list, select npx create-vite.

4. From the Template list, select react.

5. Optionally:

   To use TSX instead of JSX, select the Create TypeScript project checkbox. WebStorm will generate .tsx files for your application and a tsconfig.json configuration file.

React Native

Select this option to create a React Native application.

In the right-hand pane:

1. Specify the path to the folder where the project-related files will be stored.

2. In the Node Interpreter field, specify the Node.js interpreter to use. Select a configured interpreter from the list or choose Add to configure a new one.

3. From the React Native list, select npx --package react-native-cli react-native.

   Alternatively, for npm version 5.1 and earlier, install the react-native-cli package yourself by running npm install -g react-native-cli in the Terminal Alt+F12. When creating an application, select the folder where the react-native-cli package is stored.

Vite

Select this option to create a project scaffolded to use the Vite module bundler. Learn more from Vite.

Vue.js

Select this option to create a Vue.js application using Vue CLI.

In the right-hand pane:

1. Specify the path to the folder where the project-related files will be stored.

2. In the Node Interpreter field, specify the Node.js interpreter to use. Select a configured interpreter from the list or choose Add to configure a new one.

3. From the Vue CLI list, select npx create-vue (recommended) or npx --package @vue/cli vue.

   Alternatively, for npm version 5.1 and earlier, install the package yourself by running npm install --g create-vue or npm install --g @vue/cli in your command-line shell or in the Terminal Alt+F12. When creating an application, select the folder where the package is stored.

4. To bootstrap your application with babel and ESLint, select the Use the default project setup checkbox.

Yeoman

Select 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 Yeoman.