IntelliJ IDEA 15.0 Help

Generating a Project from a Framework Template

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:

On this page:

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.
    • 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 one of the following:
    • Choose Empty Dart Project to have IntelliJ IDEA generate a project stub with the .idea folder and the Dart SDK attached as an External Library.
    • 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.
    Click Next.
  4. On the second page of the wizard, specify the paths to the Dart SDK and to the Dartium executable file. IntelliJ IDEA 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.

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

  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.

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 viewMode 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 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 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 Stub

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.

To generate an AngularJS 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.

    From the Version drop-down list, choose the branch https://github.com/angular/angular.js to download the project template from. By default, master if shown.

  5. When you click Finish , IntelliJ IDEA sets up the AngularJS-specific project structure and generates the bower.json and package.json files with the definitions of all the necessary dependencies.
  6. Download the AngularJs dependencies that contain the AngularJS code and the tools that support development and testing.
    1. Launch the embedded Terminal by hovering your mouse pointer over show_tool_window_bars in the lower left corner of IntelliJ IDEA and choosing Terminal from the menu (see Working with Embedded Local Terminal for details).
    2. Switch to the directory where NPM is stored or define a PATH variable for it so it is available from any folder, see Installing NodeJs.
    3. At the command line prompt, type the following command:
      npm install

    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.

See Also

Last modified: 10 December 2015