ng-base-project

To create Angular Base Project for library developments

Usage

./initialise-lib.sh

Description of the process

This shell script will execute several commands.

Command : Function : check_nvm_and_node

First it will ensure that the computer on which you are running the script has nvm installed. Also ensure that you have the required node version (20.11.1).

Note: The version is defined in a variable at the start of the shell script file: V_NODE

Command : Function : install_tools

This script is going to ensure that the right version (17.3.3) of Angular is installed, if not it will install it.

Note: The version is defined in a variable at the start of the shell script file: V_ANGULAR_VERSION

Command : Function : create_lib_project : setup_create_ng_workspace

It will create an Angular workspace.

ng new $V_PROJECT_NAME --create-application=false

Warning: To ensure a fresh setup the folder is totally deleted.

Note: the folder name is defined in a variable at the start of the shell script file: V_PROJECT_NAME

Command : Function : create_lib_project : create_lib_and_showcase_projects

Within the workspace, it create one library and one showcase application (for library showcasing).

ng g library $library_name
ng g application $showcase_name --style=scss --ssr

Command : Function : create_lib_project : copy_extra_files

This script will copy several initial files from the folder sources into the root of the workspace.

The files are:

• LICENSE
• CODE_OF_CONDUCT.md
• CONTRIBUTING.md
• README.md

It will also create an empty CHANGELOG.md file into the workspace folder

Command : Function : create_lib_project : setup_prettier

This part of the script will install the package prettier into the workspace. This is added into the package.json

Prettier is an opinionated code formatter. It build and enforce a style guide for the code.

npm install --silent -D prettier

It will also create npm package runnable scripts:

• format:check:lib
• format:write:lib
• format:check:showcase
• format:write:showcase
• format:check:all
• format:write:all

Note: It is not a linter.

Command : Function : create_lib_project : setup_eslint

This part of the script will install the packages for linting the code into the workspace. This is added into the package.json

ng add @angular-eslint/schematics --skip-confirmation

It will also create npm package runnable scripts:

• format:lint:lib
• format:lint:showcase
• format:lint

It will also copy an initial eslintrc configuration file at the root of the workspace.

Command : Function : create_lib_project : setup_doctoc

This part of the script will install the package doctoc into the workspace. This is added into the package.json

npm install --silent -D doctoc

This package henerates table of contents for markdown files inside local git repository. Links are compatible with anchors generated by github or other sites.

This will be used to maintain the TOC of the project README.md

It will also create npm package runnable scripts:

• documentation:toc
• postbuild:lib

The later will ensure that the README.md located into the workspace is copied over the README.md of the library project.

This will avoid out sync README.md file and allows to maintain one README.md for the whole project.

Command : Function : create_lib_project : setup_all_contributors

This part of the script will install the package all-contributors-cli into the workspace. This is added into the package.json

npm install --silent -D all-contributors-cli

When you have contributor to your code, it is a correct behaviour to refers to them and shout out about their contribution.

This package allows to maitain their list and integrate it into the README.md

It will also create npm package runnable scripts:

• contributors:add
• all-contributors generate

It will also copy an initial all-contributorsrc configuration file at the root of the workspace.

Command : Function : create_lib_project : setup_husky_with_prettyquick_and_commitlint

The Husky package enhances your commits. It is deeply linked to GIT's hooks

...Git has a way to fire off custom scripts when certain important actions occur...

This part of the script install 3 packages into the workspace. They are added into the package.json

• husky
• pretty-quick
• commitlint

npm install --silent -D husky
npm install --silent -D pretty-quick
npm install --silent -D @commitlint/cli @commitlint/config-conventional

It will also create npm package runnable scripts:

• husky:init
• husky:prepare
• pretty-quick
• commitlint

It will also setup the husky configuration links to the git hooks. More precisely, it will prepare two hooks:

• pre-commit which will execute commitlint (which allow your team to add more semantic meaning to your git history)
• commit-msg which will execute pretty-quick (which runs Prettier on your changed files)

Command : Function : create_lib_project : setup_github_actions

Copy initial CI/CD github actions configuration files at the root of the workspace:

• branch.yml
• release.yml

The branch.yml action file will be triggered when pushing to any branches of your repository except of the main branch. It is replaced to CI.

It will execute the following action:

• Checkout
• Setup Node
• Install dependencies
• Lint
• Test
• Coverage
• Build

The release.yml action file will be triggered on the push on the main branch. It will execute the same action as the branch.yml actions and additional step for the release.

It will execute the following action:

• Checkout
• Setup Node
• Install dependencies
• Lint
• Test
• Coverage
• Build
• Release

Note: The release action will also publish the library NPMJS !!!

Warning

Do not forget that you will have to adapt the script for your purpose

You will need Github token and secret on your repository for the actions (branch and release)

You will need a token for publishing on NPM to be used in the GitHub actions (release)

You will need a account on coveralls.io linked to your Github repository

Resources

Packages used

• NVM
• NodeJs
• Angular CLI
• Prettier
• Angular ESLINT
• DocToc
• All Contributors
• Husky
• Pretty-Quick
• CommitLint
• replace-json-property

Extra services used

• coveralls.io
• npmJs