@rajroyalRajesh Royal

Modern JavaScript Project Workflow/Setup – Git, CI/CD, Code Quality, Tooling, Modules, Documentation, Demos

Written on 31st Aug 2020

Modern Project

Version control
Automated CI / CD
Code quality
Tooling
Module support
Documented API
Demos

Build Process

The automated sequence of tasks which runs on each push, tag, and/or release

Stages

Install
Lint
Test
build
Push
Deploy

Jobs

Install
- clean install –
```
npm ci
```
- security audit –
```
npm audit
```
Lint
- linter –
```
eslint
```
  /
```
stylelint
```
- formatter
```
prettier
```
Test
- test suite –
```
jest
```
  /
```
mocha
```
  /
```
ava
```
- code coverage –
```
nyc
```
  /
```
codecov
```
  /
```
coveralls
```
Build
- transpile –
```
babel
```
  /
```
typescript
```
  /
```
flow
```
- pre-process (compile, auto-prefix, etc.) –
```
sass
```
  /
```
less
```
  /
```
postcss
```
- uglify (minify, mingle, optimize, etc.) –
```
uglify-js
```
  /
```
terser
```
- bundle (
```
concat
```
  ,
```
tree-shake
```
  , etc.) –
```
webpack
```
  /
```
rollup
```
  /
```
parcel
```
- compress (gzip, etc.)
- other
  - copy / delete / move files
  - check bundle size
  - strip unused code (ts/flow/proptypes)
Push
- release –
```
GitHub
```
  /
```
bitbucket
```
  /
```
Gitlab
```
- publish –
```
npm
```
  /other registries
Deploy
- host –
```
heroku
```
  /
```
surge
```
  /
```
github-pages
```
  / etc.
Documentation
- Storybook, documentation.js, docusaurus.io swagger.io

Task execution

CLI (
```
npm
```
) or
task runner
- ```
grunt
```
  ,
```
gulp
```
  ,
```
brunch
```

Your Feedbacks are more than welcome 🤗🤗