WebStorm 9.0.0 Web Help

Generating a Project from a Framework Template

During project creation, WebStorm 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.

WebStorm 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:
    • Empty: choose this option to get just a project folder without any contents.
    • 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 OK, when ready.
  4. In the dialog box, that opens, choose the template version to use and click the Create button.

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:
    1. The location of the Node.js executable file node.exe.
    2. The location of 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:
      • Jade - haml.js successor.
      • EJS - embedded JavaScript.
    4. The CSS engine to use. From the CSS engine drop-down list, choose one of the following:
  5. Click OK, when ready. WebStorm 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. From the Project type drop-down list, choose one of the following:
    • Choose Empty Dart Project to have WebStorm 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.
  2. In the Dart dialog box that opens, specify the paths to the Dart SDK and to the Dartium executable file. WebStorm 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.

    To have have annotations verified and assertions checked, select the Start Dartium in checked mode check box. Learn more about Dartium command line flags at https://www.dartlang.org/tools/dartium/.

    Click OK when ready.

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.

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

Generating 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 Create New Project dialog box that opens, specify the project name and location.
  3. From the Project type drop-down list, choose AngularJS. The AngularJS dialog box opens.
  4. 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 OK, WebStorm 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 WebStorm 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.

See Also

Last modified: 2 December 2014
comments powered by Disqus