Skip to content
Custom Webpack configuration for front end React projects.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
cypress
mocks
src
testUtils
.eslintignore
.eslintrc
.gitattributes
.gitignore
.huskyrc
.lintstagedrc
LICENSE.md
README.md
babel.config.js
cypress.json
jest.config.js
package-lock.json
package.json
postcss.config.js
prettier.config.js
stylelint.config.js
webpack.common.js
webpack.dev.js
webpack.prod.js

README.md

Front End Project Starter

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.

Features

Main features include:

  • 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.

Getting started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Prerequisites

  • NPM

Installation requires NPM which is included with Node. You can install Node by downloading the installer from the website.

To update NPM to the latest version:

npm install -g npm@latest

Installation

  1. Clone the repo
git clone https://github.com/sargalias/front-end-project-starter.git
  1. Install NPM packages
npm install

Using in your project without future updates

Just delete the .git folder in your project and start a create a new git repository with git init.

Note: In some operating systems the .git folder is hidden. You may need to turn on the "show hidden files" option.

Using in your project with future updates

One way to use this project is to keep a dedicated branch and remote for it. That way you can keep getting updates and merging them in your project.

Setup

  1. Rename the remote to "config"
git remote rename origin config
  1. Checkout a new branch "config"
git checkout -b config

Updating

  1. Pull updates
git checkout config
git pull config master
  1. Merge those updates in your working branch
git checkout my-work-branch
git merge config

Usage

There are many commands / NPM scripts included.

Starting the project

  • Start the project on a local server: npm start

Building the project

  • Build the project for production: npm run build
  • Build the project for development (linting errors won't fail the build): npm run build:dev

Running the tests

  • Start the project on a local server along with Cypress (E2E tests): npm run start-with-cypress

  • Run all tests (Jest and Cypress): npm run test:all

  • Run Jest tests: npm test

  • Run Jest tests without coverage: npm run test:no-coverage

  • Run Jest tests in watch mode: npm run test:watch

  • Open Cypress (requires a server running): npm run cy:open

  • Run Cypress tests: npm run test:e2e

  • Run Cypress tests if a server is already running: npm run cy:run

Code formatting and linting

  • Format code with code formatter: npm run format
  • Run lint check: npm run lint
  • Run lint check in fix mode: npm run lint:fix
  • Run lint check for SCSS only: npm run lint:scss
  • Run lint check for JavaScript only: npm run lint:js
  • Run lint check in fix mode for SCSS only: npm run lint:fix:scss
  • Run lint check in fix mode for JavaScript only: npm run lint:fix:js

Build pipeline

  • Run the entire build process (code formatting, linting in fix mode, all tests): npm run ci

Notes

For every option and configuration, please see the relevant documentation. E.g. for any Stylelint issues, please see the Stylelint docs and / or docs for the relevant Stylelint plugin.

Note about the git hook

There is a pretty aggressive Git hook which runs the entire build process for every commit, ensuring linting and tests pass.

If needed, you can disable the Git hook by deleting the .huskyrc file, or using the --no-verify flag during commits. E.g.

Note about the code coverage threshold

The code coverage threshold with Jest is set to 90%. This can be changed by modifying the jest.config.js file. The option is coverageThreshold: { global: {/* ... */} }.

Built with

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

You can’t perform that action at this time.