Nx starter

Core setup for the nx applications

Content

1. Pnpm
2. Nx workspace
3. Npm check
4. Force using pnpm
5. Git
6. Git flow
7. Husky
8. Commitlint
9. Commitizen
10. Conventional changelog
11. Eslint
12. Prettier
13. Stylelint
14. Editor config
15. Used libraries
16. Next steps
17. Related projects
18. Additional info

Pnpm

pnpm - package manager, which is much faster then npm and yarn

1. Install a pnpm globally: npm i -g pnpm

Nx workspaces

Nx workspace

1. Create a nx workspace: pnpx create-nx-workspace WORKSPACE_NAME --preset=empty --no-nxCloud --package-manager=pnpm --defaultBase=main

   pnpx - pnpm package runner

   1. WORKSPACE_NAME - name of workspace
   2. --preset=empty - preset to use
   3. --nxCloud - use nx cloud or not
   4. --package-manager=pnpm - default package manager
   5. --defaultBase=main - default git branch

Npm check

npm-check - package that check for outdated, incorrect, and unused dependencies.

1. Install a npm-check only for development: pnpm i -D npm-check

2. Update package.json with:

   package.json

    {
    	...
    		"scripts": {
    			...
    		 	"check-packages": "npm-check",
    		 	"update-packages": "npm-check -y"
    		}
    	...
    }
   

Force using pnpm

Force usign pnpm throw please-use-pnpm error on npm or yarn use

1. Create .npmrc in the root folder with:

   .npmrc

    engine-strict = true
   

2. Update package.json with:

   package.json

    {
    	...
    	"license": "...",
    	"engines": {
    		 "yarn": "please-use-pnpm",
    		 "npm": "please-use-pnpm",
    		 "pnmp": ">= 15.4.3"
    	},
    	"scripts": { ... }
    	...	
    }
   

Git

Git

1. Add origin: git remote add origin https://github.com/happ-agency/nx-starter.git
2. Set main branch: git branch -M main
3. Push branch: git push -u origin main

Git flow

Git flow

1. Create main branch: git branch -M main
2. Create develop branch fron main: git checkout -b develop
3. Create feature branch from develop: git checkout -b feature/xxx
4. Create fix brabch from develop: git checkout -b fix/xxx
5. Create release brabch from develop: git checkout -b release/xxx
6. Create hotfix brabch from develop: git checkout -b hotfix/xxx

1. We work in the develop branch.
2. When we start work with the feature or fix, we create feature/xxx or fix/xxx from the develop.
3. After finish the work we create pull request from the feat/xxx or fix/xxx to the develop.
4. For the relase create release/xxx from the develop.
5. For the publish create pull request from the release/xxx to the main.
6. After the publish rebase main from the dev and rebase dev from the feature/xxx or fix/xxx.
7. Hotfix creates from the main and create pull request to the main after the finish
8. After each changes in the main or develop we do rebase from connected branches. rebase main from develop. rebase develop from features or fixes

Husky

Husky

1. Install husky only for development: pnpm i -D husky

2. Update package.json with:

   package.json

     {
    	 ...
    	 "scripts": { ... },
    	 "husky": {
    		 "hooks": {
    			"pre-commit": "nx lint"
    		 }
    	 },
    	 "private": "...",
    	 ...
     }
   

Commitlint

Commitlint

1. Install commitlint only for development: pnpm i -D @commitlint/{config-conventional,cli}

2. Install @happ/commitlint-config only for development: pnpm i -D @happ/commitlint-config

3. Create .commitlintrc.js in the root folder with:

   .commitlintrc.js

    module.exports = {
    	"extends": ["@happ/commitlint-config"]
    }
   

4. Update package.json with:

   package.json

     "husky": {
    	 "hooks": {
    		 ...
    		 "pre-commit": "nx lint",
    		 "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
    	 }
     }
   

Commit have to be like feat: add auth service, fix: remove wrong validation

You can find all availale types here

Commitizen

Commitizen

cz-format-extension - tool for customize commitizent questions

1. Install commitizen only for development: pnpm i -D commitizen

2. Install cz-format-extension only for development: pnpm i -D cz-format-extension

3. Install @happ/commitizen-config config only for development: pnpm i -D @happ/commitizen-config

   Install it together: pnpm i -D commitizen cz-format-extension @happ/commitizen-config

4. Make your repo commitizen-friendly: commitizen init cz-conventional-changelog --save-dev --save-exact

5. Create .czrc with:

   .czrc

     {
    	"path": "cz-format-extension"
     }
   

6. Create .czferc.js with:

   .czferc.js

     module.exports = {
    	extends: ['@happ/commitizen-config']
     };
   

7. Update package.json with:

   package.json

    {
    	...
    	"scripts": {
    		...
    		"git-add": "git add .",
    		"git-commit": "cz",
    		"git-push": "git push",
    		"git": "pnpm run git-add && pnpm run git-commit && pnpm run git-push"
    	}
    	...
    }
   

Conventional changelog cli

Conventional changelog cli

1. Install conventional changelog cli only for development: pnpm i -D conventional-changelog-cli

2. Init changelog: conventional-changelog -p angular -i CHANGELOG.md -s -r 0

3. Update package.json with:

   package.json

     {
    	...
    	"scripts": {
    		...
    		"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md",
    		"version": "pnpm run changelog"
    	}
    	...
     }
   

   Use pnpm version [major|minor|patch] to change your project's version and generate changelog

   version script runs automatically on pnpm version major

Eslint

Eslint

1. Install eslint only for development: pnpm i -D eslint

2. Install @happ/eslint-config only for development: pnpm i -D @happ/eslint-config

3. Install @happ/eslint-config-typescript only for development: pnpm i -D @happ/eslint-config-typescript

4. Install @happ/eslint-config-jest only for development: pnpm i -D @happ/eslint-jest

5. Install @happ/eslint-config-angular only for development: pnpm i -D @happ/eslint-config-angular

6. Install @happ/eslint-config-angular-template only for development: pnpm i -D @happ/eslint-config-angular-template

7. Install @happ/eslint-config-json only for development: pnpm i -D @happ/eslint-config-json

8. Install @happ/eslint-config-markdown only for development: pnpm i -D @happ/eslint-config-markdown

   Install it together: pnpm i -D @happ/eslint-config @happ/eslint-config-typescript @happ/eslint-config-jest @happ/eslint-config-angular @happ/eslint-config-angular-template @happ/eslint-config-json @happ/eslint-config-markdown

9. Create .eslintrc.js with:

   .eslintrc.js

     module.exports = {
    	"overrides": [
    		{
    			"files": ["*.js", "*.ts"],
    			"extends": ["@happ/eslint-config"]
    		},
    		{
    			"files": ["*.ts"],
    			"extends": ["@happ/eslint-config-typescript"]
    		},
    		{
    			"files": ["*.spec.js", "*.spec.ts"],
    			"extends": ["@happ/eslint-config-jest"]
    		},
    		{
    			"files": ["ANGULAR_DIRECTORY/*.ts"],
    			"extends": ["@happ/eslint-config-angular"]
    		},
    		{
    			"files": ["ANGULAR_DIRECTORY/*.html"],
    			"extends": ["@happ/eslint-config-angular-template"]
    		},
    		{
    			"files": ["*.json"],
    			"extends": ["@happ/eslint-config-json"]
    		},
    		{
    			"files": ["*.md"],
    			"extends": ["@happ/eslint-config-markdown"]
    		}
    	]
     }
   

Prettier

Prettier

1. Install prettier: pnpm i -D prettier

2. Install @happ/prettier-config only for development: pnpm i -D @happ/prettier-config

3. Create .prettierrc.js with:

   .prettierrc.js

     module.exports = {
    	extends: ["@happ/prettier-config"]
     };
   

Stylelint

Stylelint

1. Install stylelint only for development: pnpm i -D stylelint

2. Install @happ/stylelint-config only for development: pnpm i -D @happ/stylelint-config

3. Create .stylelintrc.js with:

   .stylelintrc.js

     module.exports = {
    	extends: ["@happ/stylelint-config"]
     };
   

Editor config

Editor config

1. Create .editorconfig with:

   .editorconfig

     root = true
   
     [*]
     end_of_line = lf
     insert_final_newline = true
     indent_style = tab
     indent_size = 2
   

If you are using VS Code you have also install plugin

Used libraries

1. Npm-check
2. Husky
3. Commitlint
4. Commitizen
5. Cz-format-extension
6. Conventional changelog cli
7. Eslint
8. Prettier
9. Stylelint

Next steps

1. To create a library run: npx nx g @nrwl/workspace:lib LIB_NAME

   1. LIB_NAME - name of the library

2. To create an app you have to create a default project in app dir and then add it to:
   1. nx.json for nx dependenices
   2. workspace.json for run|buid settings

Related projects:

1. nx-web-starter
2. nx-nestjs-starter
3. nx-angular-starter
4. nx-angular-nestjs-starter

Additional info

workspace.json and angular.json is the same.

In workspace.json we use version: 2 and targets, generators, executor

In angular.json we use version: 1 and architect, schematics, builder