Generating a Project from a Framework Template

1. Select File | New | Project from 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 path to the folder where the project-related files will be stored.

4. When you click Create, RubyMine 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: in the embedded Terminal (Alt+F12), type:

   npm install

   Learn more about installing dependencies in the Install Dependencies section of the readme.md file.

1. Select File | New | Project from 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:

   • HTML5 Boilerplate: select 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: select this option to use the Web Starter Kit.

   • Bootstrap: select this option to use the Bootstrap template, which is an elaborate modular toolkit with rich HTML, CSS, and JavaScript support.

   • Foundation: select 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 path to the folder where the project-related files will be stored.

   2. From the Version list, choose the template version to use and click Create.

To generate a Node.js application

1. Select File | New | Project from 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 path to the folder where the project-related files will be stored.

   2. The Node interpreter, see Configuring a local Node.js interpreter.

   3. The package manager to use - npm or Yarn, see npm and Yarn.

   4. The Express template engine to use. From the Template engine list, choose one of the following:

      • Dust

      • EJS

      • Handlebars

      • Hogan.js

      • Pug(Pug(Jade))

      • Twig

      • Vash

      • Static html

   5. The CSS engine to use. From the CSS engine list, choose one of the following:

      • Plain CSS

      • Stylus

      • Less

      • Compass.

      • Sass.

4. Click Create, when ready.

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

1. Select File | New | Project from 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 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 list, choose the sample to generate. To have a basic project structure generated, choose the Default option.

   4. In the Filename field, type the name for the mutually related .js, .html, and .css files that will be generated. The field is available only if the Default sample type is selected from the Template drop-dow list.

4. When you click Create, RubyMine generates a skeleton of a Meteor application, including an HTML file, a JavaScript file, a CSS file, and a .meteor folder with subfolders. RubyMine automatically marks the .meteor/local folder, which is intended for storing the built application, as excluded but still shows it in the project tree.

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

1. Select File | New | Project from the main menu or click Create New Project on the Welcome screen. The New Project dialog opens.

2. In the left-hand pane, choose Cordova App.

3. In the right-hand pane:

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

4. When you click Create, RubyMine generates a skeleton of a PhoneGap/Cordova/Ionic application with the framework-specific structure.

1. Select File | New | Project from the main menu or click Create New Project on the Welcome screen. The New Project dialog opens.

2. In the left-hand pane, choose React App.

3. In the right-hand pane, specify the project folder, the Node.js interpreter to use, and the path to the create-react-app package.

4. Optionally:

   Specify a custom package to use instead of react-scripts during the project generation. This can be one of the packages forked from react-scripts, for example, react-awesome-scripts, custom-react-scripts, react-scripts-ts, and so on.

5. When you click Create, RubyMine generates a React-specific project with all the required configuration files.

1. Select File | New | Project from the main menu or click Create New Project on the Welcome screen. The New Project dialog opens.

2. In the left-hand pane, choose Vue.js.

3. In the right-hand pane:

   1. Specify the path to the folder where the project-related files will be stored.

   2. In the Node Interpreter field, specify the Node.js interpreter to use. Select a configured interpreter from the list or choose Add to configure a new one

   3. In the vue-cli or @vue/cli field, specify the folder where the vue-cli or the @vue/cli package is stored.

   4. From the Project template list, choose the Vue.js template to use.

4. When you click Create, RubyMine asks you some additional questions about tools, like linters and the test runner, that can be added to the project. These questions vary depending on the template you've selected. After that, RubyMine generates a Vue.js-specific project with all the required configuration files.