Create New Project Dialog

Composer Project

The plugin is activated by default. If the plugin is disabled, enable it on the Plugins settings page as described in Managing Plugins.

Choose 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: choose this option to use commands from a previously downloaded composer.phar and specify its location in the text box.

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

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 text box 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. It is recommended to provide the --dev, option: the a package in this case is added to the require-dev section of the composer.json file instead of the default require section.

Joomla! Integration

The plugins are activated by default. If the plugins are disabled, enable them on the Plugins settings page as described in Managing Plugins.

Choose 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: choose this option to create an empty project folder without any Joomla!-specific structures.

HTML5 Boilerplate

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

React App

Choose this option to generate a project using a globally installed create-react-app package, see Generating 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. Choose a configured interpreter from the list or choose Add to configure a new one

3. In the create-react-app field, specify the path to the create-react-app package.

4. Optionally, in the Scripts version field, specify a custom package to use instead of react-scripts during the project generation. This can be one of the packages forked from react-scripts, for example, react-awesome-scripts, custom-react-scripts, react-scripts-ts, etc.

Foundation

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

Angular CLI

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. 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. Choose a configured interpreter from the list or choose Add to configure a new one

3. In the Angular CLI field, specify the path to the @angular/cli package.

Node.js Express App

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

4. The Express template engine to use. From the Template engine drop-down list, choose one of the following:

   • Dust

   • EJS

   • Handlebars

   • Hogan.js

   • Pug(Pug(Jade))

   • Twig

   • Vash

   • Static html

5. The CSS engine to use. From the CSS engine drop-down list, choose one of the following:

   • Plain CSS

   • Stylus

   • Less

   • Compass.

   • Sass.

Yeoman

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

Vue.js

Choose 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. Choose a configured interpreter from the list or choose Add to configure a new one

3. In the vue-cli or @vue/cli field, specify the folder where the vue-cli or the @vue/cli package is stored.

4. From the Project template list, choose the Vue.js template to use.