Generating a Project from a Framework Template
PhpStorm can create new framework-specific applications for you, set up their structure, and download the required packages, if necessary. You can also use the Yeoman generator, see Yeoman for details.
HTML5 Boilerplate, Web Starter Kit, Bootstrap, or Foundation application
Choose Create New Project on the Welcome screen. The Create New Project Dialog opens.
on the main menu or click- In the left-hand pane, choose the template to use depending on your preferences and the functionality to be implemented in your application:
Composer Project: choose this option to have a project stub created using the Composer template.
Drupal Module: choose this option to have a Drupal module created and set up.
HTML5 Boilerplate: choose 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: choose this option to use the Web Starter Kit.
Bootstrap: choose this option to use the Bootstrap template, which is an elaborate modular toolkit with rich HTML, CSS, and JavaScript support.
Foundation: choose this option to use the Foundation framework.
- The set of controls in the right-hand pane depends on the chosen template.
Specify the path to the folder where the project-related files will be stored.
From the Version list, choose the template version to use and click Create.
Node.js Express application
Install Node.js and configure it as a local Node.js interpreter.
To generate a Node.js application
Choose Create New Project on the Welcome screen. The Create New Project Dialog opens.
on the main menu or clickIn the left-hand pane, choose Node.js Express App.
- In the right-hand pane:
Specify the path to the folder where the project-related files will be stored.
The Node interpreter, see Configuring a local Node.js interpreter.
The package manager to use - npm or Yarn, see npm and Yarn.
- The Express template engine to use. From the Template engine drop-down list, choose one of the following:
- The CSS engine to use. From the CSS engine drop-down list, choose one of the following:
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.
Dart application
Before you start:
Install and enable the Dart repository plugin on the Plugins page as described in Managing Plugins.
To generate a Dart application
Choose Create New Project on the Welcome screen. The Create New Project Dialog opens.
on the main menu or clickIn the left-hand pane, choose Dart.
- In the right-hand pane:
Specify the path to the folder where the project-related files will be stored.
Specify the path to the Dart SDK. PhpStorm detects and displays the Dart version.
To have annotations verified and assertions checked, select the Start Dartium in checked mode checkbox. Learn more from Using Dartium command-line flags.
If necessary, you can open the Dart page of the Settings dialog box by clicking the Settings button and configure command-line options and a custom user data directory for Dartium.
Meteor application
Choose Create New Project on the Welcome screen. The Create New Project Dialog opens.
on the main menu or clickIn the left-hand pane, choose Meteor App.
- In the right-hand pane:
Specify the path to the folder where the project-related files will be stored.
Specify the location of the Meteor executable file (see Installing Meteor).
From the Template drop-down list, choose the sample to generate. To have a basic project structure generated, choose the Default option.
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.
- 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 and remove a tick next to the Show Excluded Files option.
PhoneGap/Cordova/Ionic application
Choose Create New Project on the Welcome screen. The Create New Project Dialog opens.
on the main menu or clickIn the left-hand pane, choose Cordova App.
- In the right-hand pane:
Specify the path to the folder where the project-related files will be stored.
Specify the location of the executable file
phonegap.cmd
, orcordova.cmd
, orionic.cmd
(see Installing PhoneGap/Cordova/Ionic).
When you click Create, PhpStorm generates a skeleton of a PhoneGap/Cordova/Ionic application with the framework-specific structure.
AngularJS application
Before you start:
Install and enable the AngularJS repository plugin on the Plugins page as described in Managing Plugins.
Choose Create New Project on the Welcome screen. The Create New Project Dialog opens.
on the main menu or clickIn the left-hand pane, choose AngularJS.
In the right-hand pane, specify the path to the folder where the project-related files will be stored.
When you click Create, PhpStorm generates the AngularJS-specific project structure with all the required configuration files based on the AngularJS seed project
Download the AngularJS dependencies that contain the AngularJS code and the tools that support development and testing: open the embedded Terminal (Alt+F12) and type
npm install
at the command prompt. Learn more about installing dependencies in the Install Dependencies section of thereadme.md
file.
React application with create-react-app
Choose Create New Project on the Welcome screen. The Create New Project Dialog opens.
on the main menu or clickIn the left-hand pane, choose React App.
In the right-hand pane, specify the project folder, the Node.js interpreter to use, and the path to the
create-react-app
package.Optionally:
Specify a custom package to use instead of react-scripts during the project generation. This can be one of the packages forked fromreact-scripts
, for example, react-awesome-scripts, custom-react-scripts, react-scripts-ts, etc.When you click Create, PhpStorm generates a React-specific project with all the required configuration files.
Vue.js application with vue-cli
Choose Create New Project on the Welcome screen. The Create New Project Dialog opens.
on the main menu or clickIn the left-hand pane, choose Vue.js.
- In the right-hand pane:
Specify the path to the folder where the project-related files will be stored.
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
In the vue-cli or @vue/cli field, specify the folder where the
vue-cli
or the@vue/cli
package is stored.From the Project template list, choose the Vue.js template to use.
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.
Composer project
You can generate a project stub from an existing package using Composer. In this case, Composer will be initialized and one package will be installed during the project stub creation. After that you can use Composer from the command line or through the user interface.
Open the New Project dialog
Choose or click Create New Project on the Welcome screen.Choose project type and location 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.
- Choose composer.phar to use
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 locally installed 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 specified in the Location field.Then, choose one of the configured local PHP interpreters from the PHP interpreter list. Refer to Configuring Local PHP Interpreters for details.
Specify PHP interpreter to use
Choose one of the configured PHP interpreters from the list, see Configuring Remote PHP Interpreters and Configuring Local PHP Interpreters for details.Specify the package to install during the project creation
In the Package area, select the package from the list, and choose the relevant version from the Version to install list. To search for a package, use the Filter packages search field.Optionally
In the Command line parameters field, type the additional command line parameters. It is recommended to provide the--dev
, option: the a package in this case is added to therequire-dev
section of the composer.json file instead of the defaultrequire
section.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.
WordPress application
Choose Create New Project on the Welcome screen. The Create New Project Dialog opens.
on the main menu or clickIn the left-hand pane, select WordPress Plugin.
In the right-hand pane, specify the folder where the project will be created. In the WordPress Installation Path text box, specify the folder where WordPress is installed. This folder should contain the
wp-admin
andwp-includes
subdirectories. Click Create to start the project stub generation.- 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.
In the Settings/Preferences dialog (Ctrl+Alt+S) and click PHP under Languages and Frameworks.
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 box that opens. Learn more in Configuring Include Paths.
Drupal module
Choose Create New Project on the Welcome screen. The Create New Project Dialog opens.
on the main menu or clickIn the left-hand pane, select Drupal Module.
In the Location field on the right-hand pane, specify the folder where the project will be created.
Specify the root folder of the Drupal installation and choose the version of Drupal to use, the supported versions are 6, 7, and 8.
Select the Include Paths list on the PHP page:
checkbox to have Drupal include paths automatically configured for the project. After you leave the dialog box, the following paths will be added to the<drupal installation root>/includes
,<drupal installation root>/modules
, and<drupal installation root>/sites/all/modules
Joomla! project
Choose Create New Project on the Welcome screen. The Create New Project Dialog opens.
on the main menu or clickIn the left-hand pane, select Joomla! Integration.
- 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 etc. These elements can be installed straight away by clicking the corresponding links. The notifications are duplicated in the Status bar, and in the Events tool window.
PhpStorm creates a stub Joomla! project that contains a PHP class <project name>.php and <project name>.xml manifest file.
Refer to the section Joomla! and to Joomla! site.