Frontwerk

A CLI toolbox for common scripts for frontend projects

Modern Frontend Toolset

Frontwerk is a zero configuration toolset aimed at helping frontend developers. It abstracts a set of underlying tools and their configurations in order to improve both the developer experience and the time it takes to get started and maintain a Javascript project.

Extensible

Frontwerk has been designed from the ground up to be easy to extend its tools configurations or even completely replace them without having to give up the benefits of the toolset itself.

Learn Once, Use Everywhere

Frontwerk's goal is to help developers painlessly achieve consistency across projects and across teams. You will be able to start writing actual code in no time at all and not worry about what tool to use to test it, what lint rules to follow and what configuration your build should use.

What's included

Test Javascript with Jest

Frontwerk uses Jest under the hood as the testing framework. You get all the power of Jest without any of the headache of setting it up and configuring it.

Testing with Jest

$ frontwerk test --no-watch
  PASS  src/__tests__/index.test.js
    ✓ Increase meaning (3ms)

  Test Suites: 1 passed, 1 total
  Tests:       1 passed, 1 total
  Snapshots:   0 total
  Time:        0.699s
  Ran all test suites.
  ✨  Done in 2.31s.

Lint Javascript with ESLint

Frontwerk will enfore code styles and standards via ESLint, coupled with widely used and accepted presets, such as AirBnB's styleguide, Prettier and accessibility.

Linting with ESLint

$ frontwerk lint

  /Users/tricinel/code/my-app/src/index.js
    1:7   error  'life' is assigned a value but never used  no-unused-vars
    5:10  error  Prefer default export                      import/prefer-default-export

  ✖ 2 problems (2 errors, 0 warnings)

Lint your CSS with Stylelint

No matter if you write CSS or if you use a preprocessor like SCSS to write your CSS, Frontwerk has you covered. Stylelint will check your CSS against the standards, report and help you fix any errors.

Linting CSS with Stylelint

$ frontwerk stylelint

  src/style.css
  2:21  ✖  Expected "#BADA55" to be "#bada55"   color-hex-case

Format your code with Prettier

In addition to code linting, Frontwerk prefers Prettier as an opinionated code formatter. Because we write code for humans and not for machines, Prettier takes care of how your code looks.

Formatting with Prettier

$ frontwerk format
  package.json 42ms
  src/__tests__/index.test.js 9ms
  src/index.js 4ms
  ✨  Done in 1.43s.

Compile Javascript with Babel

In today's modern browsers, we should aim to write modern Javascript. That means ES6, but it also means some browser might not support all features. This is where BabelJS comes in. Frontwerk will use BabelJS to compile your Javascript code to run in all browsers.

Compiling JS with BabelJS

$ frontwerk build
  src/index.js -> dist/index.js
  ✨  Done in 1.87s.

Bundle your app with Webpack or Rollup

Whether you're writing a single page application or an utility library, Frontwerk has you covered. It prefers Webpack for SPAs and RollupJS for libraries and provides default configurations for both these bundlers.

Bundling with Webpack or RollupJS

$ frontwerk build --pack
  [webpack] Hash: c35131ec2e8fc8699fc4
  [webpack] Version: webpack 3.8.1
  [webpack] Time: 303ms
  [webpack]                            Asset     Size  Chunks             Chunk Names
  [webpack]     main.c35131ec2e8fc8699fc4.js  1.08 kB       0  [emitted]  main
  [webpack] manifest.c35131ec2e8fc8699fc4.js  5.81 kB       1  [emitted]  manifest
  [webpack]    [0] ./src/index.js 95 bytes {0} [built]
  ✨  Done in 2.86s.

It only takes 5 minutes to start

Get started