Nx starter
Core setup for the nx applications
Content
- Pnpm
- Nx workspace
- Npm check
- Force using pnpm
- Git
- Git flow
- Husky
- Commitlint
- Commitizen
- Conventional changelog
- Eslint
- Prettier
- Stylelint
- Editor config
- Used libraries
- Next steps
- Related projects
- Additional info
Pnpm
pnpm - package manager, which is much faster then npm and yarn
- Install a pnpm globally:
npm i -g pnpm
Nx workspaces
-
Create a nx workspace:
pnpx create-nx-workspace WORKSPACE_NAME --preset=empty --no-nxCloud --package-manager=pnpm --defaultBase=main
pnpx - pnpm package runner
-
WORKSPACE_NAME
- name of workspace -
--preset=empty
- preset to use -
--nxCloud
- use nx cloud or not -
--package-manager=pnpm
- default package manager -
--defaultBase=main
- default git branch
-
Npm check
npm-check - package that check for outdated, incorrect, and unused dependencies.
-
Install a npm-check only for development:
pnpm i -D npm-check
-
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
-
Create
.npmrc
in the root folder with:.npmrc
engine-strict = true
-
Update
package.json
with:package.json
{ ... "license": "...", "engines": { "yarn": "please-use-pnpm", "npm": "please-use-pnpm", "pnmp": ">= 15.4.3" }, "scripts": { ... } ... }
Git
- Add origin:
git remote add origin https://github.com/happ-agency/nx-starter.git
- Set main branch:
git branch -M main
- Push branch:
git push -u origin main
Git flow
- Create
main
branch:git branch -M main
- Create
develop
branch fronmain
:git checkout -b develop
- Create
feature
branch fromdevelop
:git checkout -b feature/xxx
- Create
fix
brabch fromdevelop
:git checkout -b fix/xxx
- Create
release
brabch fromdevelop
:git checkout -b release/xxx
- Create
hotfix
brabch fromdevelop
:git checkout -b hotfix/xxx
- We work in the
develop
branch.- When we start work with the
feature
orfix
, we createfeature/xxx
orfix/xxx
from thedevelop
.- After finish the work we create pull request from the
feat/xxx
orfix/xxx
to thedevelop
.- For the relase create
release/xxx
from thedevelop
.- For the publish create pull request from the
release/xxx
to themain
.- After the publish rebase
main
from thedev
and rebasedev
from thefeature/xxx
orfix/xxx
.Hotfix
creates from themain
and create pull request to themain
after the finish- After each changes in the
main
ordevelop
we do rebase from connected branches. rebasemain
fromdevelop
. rebasedevelop
fromfeatures
orfixes
Husky
-
Install husky only for development:
pnpm i -D husky
-
Update
package.json
with:package.json
{ ... "scripts": { ... }, "husky": { "hooks": { "pre-commit": "nx lint" } }, "private": "...", ... }
Commitlint
-
Install commitlint only for development:
pnpm i -D @commitlint/{config-conventional,cli}
-
Install @happ/commitlint-config only for development:
pnpm i -D @happ/commitlint-config
-
Create
.commitlintrc.js
in the root folder with:.commitlintrc.js
module.exports = { "extends": ["@happ/commitlint-config"] }
-
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
cz-format-extension - tool for customize commitizent questions
-
Install commitizen only for development:
pnpm i -D commitizen
-
Install cz-format-extension only for development:
pnpm i -D cz-format-extension
-
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
-
Make your repo commitizen-friendly:
commitizen init cz-conventional-changelog --save-dev --save-exact
-
Create
.czrc
with:.czrc
{ "path": "cz-format-extension" }
-
Create
.czferc.js
with:.czferc.js
module.exports = { extends: ['@happ/commitizen-config'] };
-
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
-
Install conventional changelog cli only for development:
pnpm i -D conventional-changelog-cli
-
Init changelog:
conventional-changelog -p angular -i CHANGELOG.md -s -r 0
-
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 changelogversion
script runs automatically onpnpm version major
Eslint
-
Install eslint only for development:
pnpm i -D eslint
-
Install @happ/eslint-config only for development:
pnpm i -D @happ/eslint-config
-
Install @happ/eslint-config-typescript only for development:
pnpm i -D @happ/eslint-config-typescript
-
Install @happ/eslint-config-jest only for development:
pnpm i -D @happ/eslint-jest
-
Install @happ/eslint-config-angular only for development:
pnpm i -D @happ/eslint-config-angular
-
Install @happ/eslint-config-angular-template only for development:
pnpm i -D @happ/eslint-config-angular-template
-
Install @happ/eslint-config-json only for development:
pnpm i -D @happ/eslint-config-json
-
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
-
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
-
Install prettier:
pnpm i -D prettier
-
Install @happ/prettier-config only for development:
pnpm i -D @happ/prettier-config
-
Create
.prettierrc.js
with:.prettierrc.js
module.exports = { extends: ["@happ/prettier-config"] };
Stylelint
-
Install stylelint only for development:
pnpm i -D stylelint
-
Install @happ/stylelint-config only for development:
pnpm i -D @happ/stylelint-config
-
Create
.stylelintrc.js
with:.stylelintrc.js
module.exports = { extends: ["@happ/stylelint-config"] };
Editor config
-
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
- Npm-check
- Husky
- Commitlint
- Commitizen
- Cz-format-extension
- Conventional changelog cli
- Eslint
- Prettier
- Stylelint
Next steps
- To create a library run:
npx nx g @nrwl/workspace:lib LIB_NAME
-
LIB_NAME
- name of the library
-
- To create an app you have to create a default project in app dir and then add it to:
-
nx.json
fornx dependenices
-
workspace.json
forrun|buid settings
-
Related projects:
Additional info
workspace.json
andangular.json
is the same.In
workspace.json
we useversion: 2
andtargets
,generators
,executor
In
angular.json
we useversion: 1
andarchitect
,schematics
,builder