frontend-project-generator

Generate ready to use nextjs project with all basic tools setup.

Project default plugins

| Plugins | Version | Remarks | | --------------------------------- | -------- | -------------------------------- | | create-next-app | 13.0.2 | generator base installing module | | --------------------------------- | -------- | -------------------------------- | | prettier | 2.7.1 | generated repository plugin | | --------------------------------- | -------- | -------------------------------- | | eslint | 8.26.0 | generated repository plugin | | eslint-config-prettier | 8.5.0 | eslint dependent plugin | | eslint-plugin-prettier | 4.2.1 | eslint dependent plugin | | @typescript-eslint/parser | 5.42.0 | eslint dependent plugin | | @typescript-eslint/eslint-plugin | 5.42.0 | eslint dependent plugin | | eslint-import-resolver-typescript | 3.5.0 | eslint dependent plugin | | --------------------------------- | -------- | -------------------------------- | | husky | 8.0.1 | generated repository plugin | | --------------------------------- | -------- | -------------------------------- | | lint-staged | 13.0.3 | generated repository plugin | | @commitlint/cli | 17.1.2 | lint-staged dependent plugin | | @commitlint/config-conventional | 17.2.0 | lint-staged dependent plugin |

Project requirements

• node 16.*
• npm 8.*

Installing Node and npm

• Install nvm (Node Version Manager) to make sure we're using the same versions
  • macOS/Linux
  • Windows
• Run nvm install (uses the .nvmrc file)

Package installation

npm i -g frontend-project-generator

Usage

Usage: cfp <project-name> |
       create-frontend-project <project-name> |
       frontend-project-generator <project-name>

Options

| Option | Description | | ------------ | -------------------------------------- | | project-name | optional argument for the project name |

Local development

npm run build && node lib/index.js

Environment Variables

DEV_ENVIRONMENT=true   // It prevents script from running `create-next-app` and executes pure initializer (npm/yarn init)

Frontend Project Generator development

• Plugins update:
  • update plugin version property inside plugins.config.ts file.
  • test if package works, by running script locally.
  • update plugin version inside README.md file, section > Project default plugins
  • update plugin in frontend-project-generator devDependencies (dependaBot purposes).
• Plugins config file update:
  • check if config file exist in configs/${pluginName} directory:
    • exist:
      • update file
    • doesn't exist:
      • add file
      • update plugin config property inside plugins.config.ts file.
      • add createNextProject.ts > installProjectPlugin function parameter object config property .
  • add property to existing .json file:
    • go to configs/snippets/addProperty
      • add ${plugin}.json file with plugin name and wanted content
      • update plugin snippets property inside plugins.config.ts file. Property should consist of with three mandatory properties (action, inputCode, outputFile)
      • add snippet property for wanted project in createNextProject.ts > installProjectPlugin functions object property
  • edit property to existing .json file:
    • go to configs/snippets/editProperty
    • edit ${plugin}.json file and amend its content.