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