PyCharm 2017.3 Help

Generating a Project from a Framework Template

This feature is supported in the Professional edition only.

Overview

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

PyCharm generates project 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 Create New Project on the Welcome screen. The New Project Dialog opens.
  2. In the left-hand pane, choose the template to use depending on your preferences and the functionality to be implemented in your application:
    • 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.
    • 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.
  3. The set of controls in the right-hand pane depends on the chosen template.
    1. Specify the project name and the path to the folder where the project-related files will be stored.
    2. From the Version drop-down list, choose the template version to use and click Create.

Generating a Node.js Express application stub

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

  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 PyCharm, 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 Create New Project on the Welcome screen. The New Project Dialog opens.
  2. In the left-hand pane, choose Node.js Express App.
  3. In the right-hand pane:
    1. Specify the project name and the path to the folder where the project-related files will be stored.
    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:
    4. The CSS engine to use. From the CSS engine drop-down list, choose one of the following:
  4. Click Create, when ready. PyCharm 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 Meteor application stub

When you click Create, PyCharm 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.3/icon_viewMode.png button on the toolbar of the Project tool window and remove a tick next to the Show Excluded Files option.

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

  1. Choose File | New | Project on the main menu or click Create New Project on the Welcome screen. The New Project Dialog opens.
  2. In the left-hand pane, choose Meteor App.
  3. In the right-hand pane:
    1. Specify the project name and the path to the folder where the project-related files will be stored.
    2. Specify the location of the Meteor executable file (see Installing Meteor).
    3. From the Template drop-down list, choose the sample to generate. To have a basic project structure generated, choose the Default option.
    4. 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 Create New Project on the Welcome screen. The New Project Dialog opens.
  2. In the left-hand pane, choose PhoneGap/Cordova App.
  3. In the right-hand pane:
    1. Specify the project name and the path to the folder where the project-related files will be stored.
    2. Specify the location of the executable file phonegap.cmd, or cordova.cmd, or ionic.cmd (see Installing PhoneGap/Cordova/Ionic).

When you click Create, PyCharm 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 activated by default. If the plugin is disabled, enable it on the Plugins page as described in Enabling and Disabling Plugins.

PyCharm 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 Create New Project on the Welcome screen. The New Project Dialog opens.
  2. In the left-hand pane, choose AngularJS.
  3. In the right-hand pane, specify the project name and the path to the folder where the project-related files will be stored.
  4. When you click Create, PyCharm generates the AngularJS-specific project structure with all the required configuration files based on the AngularJS seed project
  5. 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 Create, PyCharm generates a skeleton of a AngularJS application with the framework-specific structure.

See Also

Last modified: 15 September 2017