< Back to portfolio

Front end project starter

Tech stack: Webpack, React, ESLint, Jest, Cypress

A very strict project configuration / boilerplate for front end projects. It features many ESLint and Stylelint plugins (including enforcing a Stylelint class pattern) and an aggressive git hook which runs on every commit.

Code repository

webpack logo

Features

  • React.
  • Webpack dev server for a great server with live-reloading capabilities and HTTPS.
  • Dynamic imports and code splitting.
  • Caching with hashes in filenames for JavaScript and CSS.
  • JavaScript transpilation with Babel (options for modern browsers / IE11 commented out in babel.config.js).
  • Strict ESLint and Stylelint with many plugins for good development practices
    • Stylint rule “selector-class-pattern” is enabled, enforcing a SCSS class pattern of BemBlock_bemElement___bemModifier.
  • Jest with jsdom for fast unit testing and integration testing.
    • Also enforces 90% code coverage.
  • Cypress for end-to-end testing.
  • Aggressive git hook to ensure the build passes in every commit, which runs:
    • Prettier code formatter in write mode.
    • ESLint and Stylelint in fix mode.
    • All the tests for Jest and Cypress, ensuring they all pass and code coverage threshold is met.
  • PostCSS with things like autoprefixer and cssnano (to minify our CSS code).
  • A lot of NPM scripts for different use cases.

The reason for all of these is that I believe code quality and passing tests are important. Also I believe it’s ideal for a repository to always be stable, so that it’s possible to revert to any commit. If really needed the git hook can always be bypassed and the test coverage threshold modified.

< Back to portfolio

^