Frontwerk

CLI toolbox for common scripts for frontend projects that includes:

• JS linting with ESLint
• JS testing with Jest
• JS formatting with Prettier
• CSS/SCSS linting with Stylelint
• Compile your JS with Babel
• Build your JS with Rollup
• Build your app with Webpack

Coming soon:

• Easily eject from using frontwerk (similar to react-scripts's eject)
• FlowJS

The problem

Working on multiple frontend projects where you need to set up the same tools and processes and then maintain them across all of them is a tideous job.

This solution

Frontwerk is a CLI that abstracts away all those processes and configuration and exposes the same API that you can use across all your projects.

You can pick and choose which tools to use (i.e. if you don't want to format your JS with prettier, you don't have to).

Inspiration

This is heavily inspired by kcd-scripts by the amazing Kent C. Dodds (you should definitely follow him on Twitter by the way) and react-scripts.

So why not just use kcd-scripts? You absolutely should! We're not in a zero-sum game here. I basically wanted to learn how he created everything without even knowing I'd get this far!

Installation and usage

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev frontwerk

or with yarn:

yarn add --dev frontwerk

Usage

This is a CLI and exposes a bin called frontwerk. You can run

frontwerk

with no arguments to show a list of available commands. Or simply checkout the src/scripts directory for all the available scripts.

Then simply ammend your package.json scripts property to include the scripts you want to use:

{
  "scripts": {
    "lint:js": "frontwerk lint",
    "lint:css": "frontwerk stylelint",
    "test": "frontwerk test --no-watch",
    "test:watch": "frontwerk test",
    "build": "frontwerk build",
    "format": "frontwerk format"
  }
}

Overriding the configuration

Although it works out of the box, Frontwerk allows you to specify your own config for the various scripts, either by extending the config provided or just by using your own, depending on the script. Frontwerk respects the convention used by each of its underlying tools (eslint, stylelint, etc.). Basically, if it's possible with that tool, it's possible with frontwerk.

Example with ESLint

{
  "extends": "./node_modules/frontwerk/eslint.js",
  "rules": {}
}

or, simply start with your own config to pass to ESLint:

{
  "extends": "google"
}

Note that eslintignore is coincidentally ignored, so until this issue is resolved, please pass the eslint ignore as allowed by eslint's configuration.

Documentation

You can find more extensive documentation about each tool on the website.

LICENSE

MIT