Create New Project Dialog

Composer Project

The feature is supported only when the Command Line Tools Support plugin is installed and enabled.

The plugin is bundled with PhpStorm and activated by default. If the plugin is disabled, enable it on the Installed tab of the Settings | Plugins page, as described in Managing plugins.

Select this option to have a project stub created using the Composer template.

In the right-hand pane:

1. In the Composer.phar area, appoint the composer.phar command definition file to use in project creation.

   • Use existing composer.phar: select this option to use commands from a previously downloaded composer.phar and specify its location in the field.

   • Download composer.phar from getcomposer.org select this option to have a new instance of Composer downloaded. The downloaded composer.phar file will be saved under the project root folder.

2. In the Package area, specify the package to install during the project creation.

   • Available packages: from this list, select the package to install. Use the search field, if necessary: start typing the search string, as you type, the list dynamically reduces to show the packages that match the entered pattern.

   • Description: this read-only field briefly explains the functionality of the selected package.

   • Version to install: from this list, select the package version. The contents of the list depend on the specific package.

3. In the Settings area, specify advanced settings for generating a project stub and installing packages (dependencies):

   • Path to PHP executable: in this field, specify the location of the PHP engine installation folder.

   • Command line parameters: in this field, type the additional command line parameters.

Drupal Module

The feature is supported only when the Drupal Support plugin is installed and enabled.

The plugins are activated by default. If the plugins are disabled, enable them on the Installed tab of the Plugins page as described in Install plugins.

Select this option to have a Drupal module created and set up.

In the right-hand pane:

1. In the Drupal installation path field, specify the root folder of the Drupal installation. Type the path manually or click Browse and select the relevant folder in the dialog that opens.

Joomla! Integration

The feature is supported only when the Joomla! Support plugin is installed and enabled.

The plugins are activated by default. If the plugins are disabled, enable them on the Installed tab of the Plugins page as described in Install plugins.

Select this option to get a project stub for developing an application using the Joomla! content management system.

In the right-hand pane:

1. In the Joomla! installation path specify the folder where Joomla! is installed.

2. From the Project Type list, choose the Joomla! unit type for the application you will develop in the project. According to this choice, PhpStorm will structure the stub and download the necessaey sources. The available options are:

   • Joomla! Component

   • Joomla! Module

   • Joomla! Plugin

   • Empty Joomla! Project: select this option to create an empty project folder without any Joomla!-specific structures.

WordPress Plugin

The feature is supported only when the WordPress Support plugin is installed and enabled.

The plugins are activated by default. If the plugins are disabled, enable them on the Installed tab of the Plugins page as described in Install plugins.

Select this option to get a project stub for developing applications using WordPress, see WordPress for details.

In the right-hand pane: Type the project location and specify the folder where WordPress is installed. This folder should contain the wp-admin and wp-includes subdirectories.

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.

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. See Dart for details.

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, see Configuring a local Node.js interpreter.

3. The package manager to use - npm or Yarn, see 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 (see 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).

Node.js

Select this option to start a simple Node.js application. PhpStorm 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, the Node.js interpreter, and the package manager (npm or Yarn, see npm, pnpm, and Yarn for details).

React

Select this option to generate a project using a globally installed create-react-app package, see Generate a React application with create-react-app for details.

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 create-react-app list, select npx create-react-app.

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

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.

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