frontend-project-generator

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.