Clipped.js: an Introduction

Clipped.js, a preset-based library to make configurations 100% reusable across projects

Pain of static configurations

Configurations are everywhere. To use babel we have ‘.babelrc’, for Webpack we have ‘webpack.config.js’, and for Docker we have ‘Dockerfile’.

For a tool that requires a significant amount of configuration like Webpack, it just feels clumsy having to enter similar things like this for trillion times:

module.exports = {
  entry: {
    vendor: ['react'],
    index: 'src/index.js'
  },
  output: {
    path: 'dist'
  },
  module: {
    rules: [
      // tons of loaders...
    ]
  }
}

We already have some awesome tools like poi, backpack.js to alleviate the pain, but sooner or later you still need to look up StackOverflow to check why a single line of Webpack property screwed up everything again…

Getting Started with Clipped.js

So how is it like to use Clipped.js? Lets try a simple React.js project in 4 steps!

1. You will first need to install Clipped.js globally:

$ npm i -g clipped

2. Use the built-in command to scaffold a project, choosing ‘webpack-frontend’ preset

$ clipped init
? Your project name: introduction-to-clippedjs
? Presets to use 
 ◯ docker
 ◯ webpack-backend
❯◉ webpack-frontend
 ◯ webpack-nodejs
 ◯ webpack
 ◯ skip for now

3. Install react and react-dom and replace ‘src/index.js’ with the following:

import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
)

4. Now we can fire up the project with

$ clipped dev

and the site is live at http://localhost:8080 !

How Clipped.js works

Clipped.js looks for your ‘clipped.config.js’, then for each clipped.use it will execute the preset, which is a function that makes modification to the clipped instance.

You already created you very first preset!

How a preset / your ‘clipped.config.js’ looks like:

module.exports = async clipped =>
  clipped.use(require('clipped-preset-webpack-frontend'))

Preset does not really seem dark magic at all does it? ;)

Making preset a function makes it way more flexible and composable than static configuration. You may also notice that the preset is async. That means you can do whatever asynchronous operations in a preset, like making API calls or doing file operations.

Conclusion

All official presets are under the ‘presets’ folder of the official repo.
Be sure to check out more about Clipped.js on its documentation website!

The project is open-source and we welcome any contributions :)