Generate project from framework template

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. 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, 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: 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. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. 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.

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

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. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. The New Project dialog opens.

2. In the left-hand pane, choose Express.

3. In the right-hand pane, specify the following:

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

   2. The Node interpreter, refer to Configuring a local Node.js interpreter.

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

   4. The express -generator.

      It is recommended that you use npx that downloads and runs the generator. To do that, select npx --package express-generator express from the express -generator list.

      Alternatively, open the embedded Terminal (Alt+F12) and type npm install --g express-generator and then select the downloaded generator from the express-generator list.

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

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

      • Plain CSS

      • Stylus

      • Less

      • Sass.

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.

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

2. In the left-hand pane, choose Vite.

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. From the Vite list, select npx create-vite.

   4. From the Template list, select react.

   5. Optional:

      To use TSX instead of JSX, select the Create TypeScript project checkbox. PyCharm will generate .tsx files for your application and a tsconfig.json configuration file.

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

1. Click Create New Project on the Welcome screen or select File | New | Project from the main menu. 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. From the Vue CLI list, select npx --package @vue/cli vue.

      Alternatively, for npm version 5.1 and earlier, install the @vue/cli package yourself by running npm install --g @vue/cli in the Terminal Alt+F12. When creating an application, select the folder where the @vue/cli package is stored.

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

4. When you click Create, PyCharm 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, PyCharm generates a Vue.js-specific project with all the required configuration files.