Generating a Project from a Framework Template

1. Choose File | New Project or click New Project on the Welcome screen.

2. In the left-hand pane, select Composer Project. In the Location field on the right-hand pane, specify the folder where the project will be created.

3. Choose how the Composer commands will be executed:

   • To run commands via a globally installed composer executable, choose 'composer' executable and specify its location in the field.

   • To run commands via the local composer.phar archive, choose composer.phar. Then, either specify the location of the existing composer.phar file in the field or select the Download composer.phar from getcomposer.org checkbox to download a new instance of the file. The downloaded composer.phar file will be saved under the project root folder.

     Then, choose one of the configured local PHP interpreters from the PHP interpreter list. Refer to Configure local PHP interpreters for details.

   Optionally, in the Command line parameters field, type the additional command line parameters.

4. In the Package area, type the name of the desired package in the Package field. To use code completion, press Ctrl+Space. Then choose the relevant version from the Version to install list.

6. Click Create. The create-project Composer command will be invoked with the selected package. As a result, the Composer project will be created, whose configuration and structure depends on the selected package. After that, the created PhpStorm project opens.

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, select Drupal Module.

3. In the Location field on the right-hand pane, specify the folder where the project will be created.

4. Specify the root folder of the Drupal installation and choose the version of Drupal to use, the supported versions are 6, 7, 8, and 9.

   tip

   Drupal 10 is currently not supported, use version 9 in the IDE settings instead.

5. Select the Set up PHP | Include paths checkbox to have Drupal include paths automatically configured for the project. After you leave the dialog, the following paths will be added to the Include Paths list on the PHP page: <drupal installation root>/includes, <drupal installation root>/modules, and <drupal installation root>/sites/all/modules

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, select Joomla! Integration.

3. In the Location field on the right-hand pane, specify the folder where the project will be created.

   • Joomla installation path

   • Project type (component, module or plugin)

   PhpStorm shows balloons with notifications about the missing Joomla! code styles, namespaces and so on. These elements can be installed straight away by clicking the corresponding links. The notifications are duplicated in the Status bar, and in the Notifications tool window.

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, select WordPress Plugin.

3. In the right-hand pane, specify the folder where the project will be created.

   In the WordPress installation path field, specify the folder where WordPress is installed. This folder should contain the wp-admin and wp-includes subdirectories. Click Create to start the project stub generation.

4. If the newly created project is outside the WordPress installation folder, configure it as an external library by adding it to the list of included path.

   1. In the Settings dialog (Ctrl+Alt+S), go to PHP.

   2. On the PHP page that opens, add the path to the WordPress installation folder to the Include Paths list: click the button and specify the path to the installation folder in the dialog that opens. Learn more in Configure include paths.

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, choose AngularJS.

3. In the right-hand pane, specify the path to the folder where the project-related files will be stored.

4. When you click Create, PhpStorm generates the AngularJS-specific project structure with all the required configuration files based on the AngularJS seed project

5. Download the AngularJS dependencies that contain the AngularJS code and the tools that support development and testing: in the embedded Terminal (Alt+F12) , type:

   npm install

   Learn more about installing dependencies in the Install Dependencies section of the readme.md file.

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, choose the template to use depending on your preferences and the functionality to be implemented in your application:

   • HTML5 Boilerplate: select this option to use the HTML5 Boilerplate template. This is a starting project template that can be easily adapted to your needs.

   • Web Starter Kit: select this option to use the Web Starter Kit.

   • Bootstrap: select this option to use the Bootstrap template, which is an elaborate modular toolkit with rich HTML, CSS, and JavaScript support.

   • Foundation: select this option to use the Foundation framework.

3. The set of controls in the right-hand pane depends on the chosen template.

   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.

To generate a Node.js application

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, choose Express.

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

4. Click Create, when ready.

   PhpStorm launches the Express Project Generator tool that downloads all the required data, sets up the project structure, and opens the project either in the current window or in a new one, depending on your choice.

To generate a Dart application

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, choose Dart.

3. 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 downloaded Dart SDK.

      If you followed the standard installation procedure, as described on the Dart official website, PhpStorm detects the path to the Dart SDK automatically.

      Alternatively, type the path manually or click and select the path in the dialog that opens.

      If PhpStorm recognizes the Dart SDK correctly, its revision number is displayed in the Version read-only field.

   Click Create when ready.

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, choose Meteor.

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

4. When you click Create, PhpStorm generates a skeleton of a Meteor application, including an HTML file, a JavaScript file, a CSS file, and a .meteor folder with subfolders. PhpStorm automatically marks the .meteor/local folder, which is intended for storing the built application, as excluded but still shows it in the project tree.

   By default, excluded files are shown in the project tree. To hide the .meteor/local folder, click on the toolbar of the Project tool window, select Tree Appearance, and remove a tick next to the Show Excluded Files option.

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, choose Cordova.

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

4. When you click Create, PhpStorm generates a skeleton of a PhoneGap or Cordova application with the framework-specific structure.

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, choose React.

3. In the right-hand pane, specify the project folder, the Node.js interpreter to use, and the path to the create-react-app package.

4. Optionally:

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

5. When you click Create, PhpStorm generates a React-specific project with all the required configuration files.

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, choose Vue.js.

3. 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 --package @vue/cli vue.

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

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

4. When you click Create, PhpStorm asks you some additional questions about tools, like linters and the test runner, that can be added to the project. These questions vary depending on the template you've selected. After that, PhpStorm generates a Vue.js-specific project with all the required configuration files.