IntelliJ IDEA 2017.2 Help

Generating a Project from a Framework Template

This feature is supported in the Ultimate edition only.

On this page:

Overview

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

IntelliJ IDEA generates project or module stubs based on the following templates:

Generating a HTML5 Boilerplate, Web Starter Kit, React Starter Kit, 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 Project Category and Options dialog, which is the first page of the New Project wizard, choose Static Web in the left-hand pane.
  3. In the right-hand pane, choose the template to use depending on your preferences and the functionality to be implemented in your application:
    • Static Web:
    • 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.
    • React Starter Kit: choose this option to use the React Starter Kit.
    • 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.
    Click Next, when ready.
  4. On the second page of the wizard, specify the following:
    1. The name of the project and the folder to create it in.
    2. The version of the template to use.
    Click Finish when ready.

Generating a Node.js Express application stub

Generating such application stubs requires that Node.js is supported in IntelliJ IDEA:

  1. The Node.js runtime environment is downloaded and installed on your computer.
  2. The Node.js repository plugin is installed and enabled. The plugin is not bundled with IntelliJ IDEA, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.
Learn more in Node.js

To generate a Node.js application stub:

  1. Choose File | New | Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Project Category and Options dialog, which is the first page of the New Project wizard, choose Node.js and NPM in the left-hand pane.
  3. In the right-hand pane, choose Node.js Express App and click Next.
  4. On the second page of the wizard, specify the following:
    1. The project name and the folder to create it in.
    2. The path to the Node.js executable file node.exe and to the Node.js package manager file npm.cmd.
    3. The Express template engine to use. From the Template engine drop-down list, choose one of the following:
  5. Click Finish, when ready. IntelliJ IDEA 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

Generating Dart application stubs requires that Dart is supported in IntelliJ IDEA:

  1. The Dart SDK is available on your computer.
  2. The Dart plugin is installed and enabled. The plugin is not bundled with IntelliJ IDEA, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

To generate 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 Project Category and Options dialog, which is the first page of the New Project wizard, choose Dart in the left-hand pane.
  3. In the right-hand pane, choose the type of the stub depending on the type of the application you are going to develop. The number of available options depend on the currently used Stagehand, see http://stagehand.pub/ for details. Click Next.
  4. On the second page of the wizard, specify the paths to the Dart SDK and optionally to the Dartium executable file (Windows and Linux)/Dartium application (macOS). IntelliJ IDEA detects and displays the Dart version. Click Finish when ready.

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.

Generating a Meteor application stub

When you click Finish, IntelliJ IDEA 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 /help/img/idea/2017.2/icon_viewMode.png button on the toolbar of the Project tool window and remove a tick next to the Show Excluded Files option.

IntelliJ IDEA 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. IntelliJ IDEA recognizes Spacebars templates, but as a side effect marks HTML files in Meteor projects with the Handlebars/Mustache icon /help/img/idea/2017.2/fileTypeHandlebars.png.

  1. Choose File | New | Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Project Category and Options dialog, which is the first page of the New Project wizard, choose Static Web in the left-hand pane.
  3. In the right-hand pane, choose Meteor JS App and click Next.
  4. On the second page of the wizard, specify the project name and the folder to create it in. Specify the location of the Meteor executable file (see Installing Meteor).
  5. From the Template drop-down list, choose the sample to generate. To have a basic project structure generated, choose the Default option.
  6. 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.

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 Project Category and Options dialog, which is the first page of the New Project wizard, choose Static Web in the left-hand pane.
  3. In the right-hand pane, choose PhoneGap/Cordova App and click Next.
  4. On the second page of the wizard, specify the project name and the folder to create it in. Specify the location of the executable file phonegap.cmd, or cordova.cmd, or ionic.cmd (see Installing PhoneGap/Cordova/Ionic).

When you click Finish, IntelliJ IDEA generates a skeleton of a PhoneGap/Cordova/Ionic application with the framework-specific structure.

Generating an AngularJS application

This requires that the AngularJS plugin is installed and enabled. The plugin is not bundled with IntelliJ IDEA, but it can be installed from the JetBrains plugin repository as described in Installing, Updating and Uninstalling Repository Plugins and Enabling and Disabling Plugins.

IntelliJ IDEA can generate a project stub for developing applications using AngularJS. To generate an Angular stub, use Angular CLI, see Angular. To generate an Angular 1 application stub:

  1. Choose File | New | Project on the main menu or click the New Project button on the Welcome screen.
  2. In the Project Category and Options dialog, which is the first page of the New Project wizard, choose Static Web in the left-hand pane.
  3. In the right-hand pane, choose AngularJS and click Next.
  4. On the second page of the wizard, specify the project name and the folder to create it in.
  5. When you click Finish , IntelliJ IDEA generates the AngularJS-specific project structure with all the required configuration files based on the AngularJS seed project
  6. Download the AngularJS dependencies that contain the AngularJS code and the tools that support development and testing: open the embedded Terminal (View | Tool Windows | Terminal) and type npm install at the command prompt. Learn more about the installation of dependencies in the Install Dependencies section of the readme.md file.

When you click Finish, IntelliJ IDEA generates a skeleton of a AngularJS application with the framework-specific structure.

Generating a Composer project stub

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.
  1. Open the New Project dialog
    Choose File | New Project or click Create New Project on the Welcome screen.
  2. Choose project type and location In the left-hand pane, click PHP from the list, then choose Composer Project in the right-hand pane, and then click Next. On the second page of the wizard, specify the project name and the folder where it will be created.
  3. Choose composer.phar to use
    • To use commands from a previously downloaded composer.phar, choose Use existing composer.phar and specify its location in the text box.
    • To download a new instance of Composer, choose Download composer.phar from getcomposer.org. The composer.phar file will be saved under the project root folder specified in the Location text box.
  4. 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.
  5. 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 list.
  6. Optionally
    In the Command line parameters text box, type the additional command line parameters. For example, to have a package added to the require-dev section instead of the default require section, type --dev. For more information about Composer command line options during installation, see https://getcomposer.org/doc/03-cli.md.

When you click Finish, the create-project command is invoked with the selected package. This results in creating a Composer project whose configuration and structure depends on the selected package, see https://getcomposer.org/doc/03-cli.md for details. After that a IntelliJ IDEA project opens.

Generating a WordPress application stub

  1. Choose File | New | Project on the main menu or click Create New Project on the Welcome screen. The Project Category and Options dialog opens.
  2. In the left-hand pane, click PHP from the list, then choose WordPress Plugin in the right-hand pane, and then click Next.
  3. On the second page of the wizard, specify the project name and the folder where it will be created. 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. Click Finish 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. Open the Settings / Preferences Dialog by pressing Ctrl+Alt+S or by choosing File | Settings for Windows and Linux or IntelliJ IDEA | Preferences for macOS, and click PHP under Languages & Frameworks.
    2. On the PHP page that opens, add the path to the WordPress installation folder to the Include Paths list: click the /help/img/idea/2017.2/new.png button and specify the path to the installation folder in the dialog box that opens. Learn more in Configuring Include Paths.

Generating a Drupal module stub

  1. Choose File | New | Project on the main menu or click Create New Project on the Welcome screen. The Project Category and Options dialog opens.
  2. In the left-hand pane, click PHP from the list, then choose Drupal Module in the right-hand pane, and then click Next.
  3. On the second page of the wizard, specify the project name and the folder where it 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, and 8.
  5. Select the Set up PHP | Include paths check box to have Drupal include paths automatically configured for the project. After you leave the dialog box, 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

Later you can change the Drupal installation and re-configure the include paths on the Frameworks page as described in How do I change Drupal settings?

IntelliJ IDEA generates a project stub in accordance with the selected Drupal version. For Drupal 8, a module_name.info.yml file is generated where information about the module is provided.

Last modified: 30 August 2017

See Also