Skip to main content
Frontwerk Frontwerk
  • v1.2.0
  • Github

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