Project Creation

Before you start, you will need

1. A Git hosting service (Github, Gitlab, Bitbucket)
2. A CI/CD (Github Actions, Gitlab, Travis, CircleCI)
3. An npm account / org
4. Git installed on your machine.
5. Node installed on your machine.
6. Node Version Manager installed.

What a nice project would have

1. Documentation
2. Consistent Code Style
3. 100% Test Coverage
4. Stable Releases

What we want to do:

1. Set up any kind on javascript project (node, react, angular, …)
2. Set up testing.
3. Save code changes to a repo.
4. Automate Publishing.

Possible order of actions

1. Init Code -> Create Repo -> Automate -> Deploy
2. Create Repo -> Init Code -> Automate -> Deploy
3. Create Repo -> Setup Automation -> Init Code -> Deploy
4. Create Repo -> Init Code -> Deploy -> Setup Automation

Steps for POAs

Possible order of actions

1. Init Code -> Create Repo -> Automate

• Init Code eg:
  • mkdir my-app && cd $_ && npm init && git init
  • npx create-react-app my-app --template typescript
  • ng new my-app

• Create repo:

  • More details here
  • If your project init didn’t do it: git init
  • Create a new repo
  • Copy the repo url (not the browser one, the ‘clone’ one. Usually: ssh://)
  • git remote add origin remote repository URL
  • Once you write some code you can:
    • git add .
    • git commit -m "Init Commit"
    • git push or git push origin master
  • Establish a Branching Strategy
• Automate
  1. Set up a CI/CD
  2. Prettier
  3. Lint Staged
  4. Commit Lint
  5. Commitizen
  6. Semantic Release

Setting up a project

1. Create a repo, init npm, and set node version.
2. Create a .gitignore file, Editor Config and Linting
3. Install Typescript and Jest

Setup Automation

1. Prettier
2. Lint Staged
3. Commit Lint
4. Commitizen
5. Semantic Release

Setting up a project

Create a repo, init npm, and set node version.

# Create a git repo and check it out
git clone ssh:_repo_name_ && cd _repo_name_

# Add npm
npm init

# Set node version
node -v > .nvmrc

Create a .gitignore file, Editor Config and Linting

• Create a .gitignore file
• Create an .editorconfig file
• Linting

# install eslint
# follow the prompts and create an .eslintrc.js
npx eslint --init
# Add typescript support
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

• Create an eslintrc

Install Typescript and Jest

npm install --save-dev typescript ts-node @types/node

• Create a tsconfig.json file

• Install jest, and typescript files for jest

npm install --save-dev @types/jest jest ts-jest

• Create a jest.config.js file

• Create a Directory and index file for the source code

mkdir ./src && cat > ./src/index.ts <<EOL
export {};
EOL

• Add npm run scripts to Package.json

//...
"scripts": {
  "start": "ts-node ./index.ts",
  "ts:defs": "tsc --declaration --outDir ./dist --emitDeclarationOnly",
  "build": "rm -rf ./dist && tsc && npm run ts:defs",
  "test": "jest",
  "semantic-release": "semantic-release"
},
//...

Setup Automation

Prettier

# install prettier
npm install --save-dev --save-exact prettier
npm install eslint-config-prettier --save-dev
# Create prettierrc
echo {}> .prettierrc.json

Prettier Git Hooks

# lint-staged (via mrm which syncs up configs) This will also install husky.
npx mrm lint-staged

create lint-staged.config.js

create husky.config.js

• lint-staged, and husky configs can now be removed from package.json

Commit Lint

npm install --save-dev @commitlint/{config-conventional,cli}

Create a commitlint.config

Add Commit Lint to husky config

Commitizen

npm install commitizen -g
commitizen init cz-conventional-changelog --save-dev --save-exact

Add Commitizen Config

Add commitizen to the husky config

semantic-release

See: semantic-release Docs

npm install semantic-release --save-dev

In order to update auto-update the the changelog:

npm install @semantic-release/changelog --save-dev
npm install @semantic-release/release-notes-generator --save-dev
npm install semantic-release-contributors --save-dev

Add a release.config