Modern JavaScript Project Workflow/Setup with Git, CI/CD, Code Quality, Tooling and more

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

1. Install
2. Lint
3. Test
4. build
5. Push
6. 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 🤗🤗

Comments

[Chris Bongers]

Nice article!

Perhaps you can elaborate a bit more per step in a future article, like in depth per fase?

[Rajesh Royal]

yes. I will definitely try to do this. Thanks, Chris 🙂