PhpStorm 8.0.0 Web Help

During project creation, PhpStorm can generate a project stub for developing Web applications. The project structure is set up and some sources are generated based on external templates and frameworks downloaded upon your request.

PhpStorm generates project stubs based on the following templates:

On this page:

Generating a HTML5 Boilerplate, Twitter Bootstrap, or Foundation Application Stub
  1. Choose File | New Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Create New Project dialog box that opens, specify the project name and location.
  3. Choose the template to use depending on your preferences and the functionality to be implemented in your application. From the Project type drop-down list, choose one of the following items:
    • 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.
    • Twitter Bootstrap: choose this option to use the Twitter Bootstrap template, which is an elaborate modular toolkit with rich HTML, CSS, and JavaScript support.
    • Foundation: choose this option to use the Foundation framework.
  4. Click OK, when ready.
  5. In the dialog box, that opens, choose the template version to use and click the Create button.
Generating a Node Boilerplate Application Stub
  1. Choose File | New Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Create New Project dialog box that opens, specify the project name and location.
  3. From the Project type drop-down list, choose Node.js Boilerplate and click OK.
  4. In the Node.js Boilerplate dialog box, that opens, choose the branch in the GitHub repository where the relevant version of the template lives. By default, the master branch is used.
Generating a Node.js Express Application Stub
  1. Choose File | New Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Create New Project dialog box that opens, specify the project name and location.
  3. From the Project type drop-down list, choose Node.js Express App and click OK.
  4. In the Express App Project Settings dialog box, that opens, specify the following:
    • The location of the Node.js executable file node.exe.
    • The location of the Node.js package manager file npm.cmd.
    • To have Express sessions supported, select the Add session support check box.
    • Specify the Express template engine to use. From the Template engine drop-down list, choose one of the following:
      • Jade - haml.js successor.
      • EJS - embedded JavaScript.
    • Specify the CSS engine to use. From the CSS engine drop-down list, choose one of the following:
  5. Click OK, 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.
Generating a Dart Application Stub
  1. Choose File | New Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Create New Project dialog box that opens, specify the project name and location.
  3. From the Project type drop-down list, choose one of the following:
    • Choose Dart Web Application if you are going to develop a client-side Dart application.
    • Choose Dart Command Line Application for developing a server-side or a client-side application, provided that you are going to run, debug, and test it in the command line mode, that is, without deploying and running it on the server or in the browser and with the output shown in the console.
  4. In the Dart dialog box that opens, specify the paths to the Dart SDK and to the Dartium executable file. PhpStorm detects and displays the Dart version. If the SDK was downloaded within the Dart Editor Bundle, the path to Dartium is also detected and filled in automatically.
Generating a Composer Project Stub
You can have PhpStorm 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.
  1. Choose File | New Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Create New Project dialog box that opens, specify the project name and location.
  3. From the Project type drop-down list, choose Composer Project. The Composer Project Dialog opens.
  4. Appoint the Composer instance to use.
    • To use commands from a previously downloaded composer.phar, choose Use existing composer.phar: and specify it location in the text box.
    • To have a new instance of Composer downloaded, choose Download composer.phar from getcomposer.org:. The composer.phar file will be saved under the project root folder specified in the Create New Project dialog.
  5. In the Package area, specify the package to install during the project creation. Select the package to add from the Available Packages list, possibly using the search field, and choose the relevant version from the Version to install drop-down list.

When PhpStorm completes the project stub generation, the package is stored in a new folder under the Vendor node and is added to the list in the require or require-dev section of Composer.json.

Generating a WordPress Application Stub
  1. Choose File | New Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Create New Project dialog box that opens, specify the project name and location.
  3. From the Project type drop-down list, choose WordPress Plugin. The WordPress Plugin dialog box opens.
  4. In the WordPress Installation Path text box, specify the folder where WordPress is installed. This folder should contain the wp-admin and wp-includes subdirectories.
  5. If the project is outside the WordPress installation folder, configure it as an external library by adding it to the list of included path.
    1. Open the project settings by choosing File | Settings | Project Settings. Then click PHP.
    2. On the PHP page that opens, add the path to the WordPress installation folder to the Include Paths list: click the add button and specify the path to the installation folder in the dialog box that opens. Learn more in Configuring Include Paths.
Generating a Meteor Application Stub
  1. Choose File | New Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Create New Project dialog box that opens, specify the project name and location.
  3. From the Project type drop-down list, choose Meteor JS App and click OK.
  4. In the Meteor JS App dialog box, that opens, specify the location of the Meteor executable file (see Installing Meteor, and choose the sample to generate from the Project Template drop-down list. To have a basic project structure generated, choose the Default option.

When you click OK, PhpStorm generates a skeleton of a Meteor application, including an HTML file, a JavaScript file, a CSS file, and a .meteor folder with subfolders. The .meteor/local folder, which is intended for storing the built application, is automatically marked as excluded and is not involved in indexing.

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

PhpStorm also automatically attaches the predefined Meteor library to the project, thus enabling syntax highlighting, resolving references, and code completion. See Configuring JavaScript Libraries for details.

Meteor uses Spacebars templates that are an extension of the Handlebars/Mustache templates. PhpStorm recognizes Spacebars templates, but as a side effect marks HTML files in Meteor projects with the Handlebars/Mustache icon fileTypeHandlebars.

Generating a PhoneGap/Cordova/Ionic Application Stub
  1. Choose File | New Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Create New Project dialog box that opens, specify the project name and location.
  3. From the Project type drop-down list, choose PhoneGap/Cordova App and click OK.
  4. In the PhoneGap/Cordova App dialog box, that opens, specify the location of the executable file phonegap.cmd, or cordova.cmd, or ionic.cmd (see Installing PhoneGap/Cordova/Ionic).

When you click OK, PhpStorm generates a skeleton of a PhoneGap/Cordova/Ionic application with the framework-specific structure

See Also

Concepts:

Procedures:

Reference:

Web Resources: