An opinionated client build process tool

Last updated 4 years ago by ksmithut .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install @ksmithut/client-build 
SYNC missed versions from official npm registry.


A client build runner focused on simplicity and rapid development.

This borrows heavily from create-react-app, and has many of the same goals. This project aims to simplify the modern client build process. With the rise of configuration saturated build tools like babel and webpack, you could spend an entire work day messing around with build tool configuration and still not be completely happy with it. This module has the defaults you would need, and is mostly compatible with create-react-app. The only feature really taken out was the webpack html-loader. This may be added back in later, but for now was causing more issues than it was worth.

Here's a brief overview of features included:

  • ES___ transpiling - Has most of the features you would need for your react apps:
    • async/await
    • trailing function commas
    • class properties
    • object rest/spread
    • react constant elements
    • es2015
    • es2016
    • JSX
    • Promise/Object.assign polyfill
  • Webpack dashboard
  • CSS Loader
  • File Loader
  • Production Build
  • Other Useful Things (I'm sure)

Unlike create-react-app, this package doesn't take care of your app boilerplate. This is simply a build tool.


If you do want to create a boilerplate from scratch, here's where you could start:

mkdir my-app && cd $_ # change to your project name
touch .gitignore
mkdir src
touch src/index.js
touch src/HelloWorld.js
touch index.html
npm init -y
npm install --save react react-dom
npm install --save-dev @ksmithut/client-build

Then add the following scripts to your package.json:

  "scripts": {
    "start": "client-build start",
    "build": "client-build build",
    "test": "client-build test"

Add the following to your index.html:

<!DOCTYPE html>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My React App</title>
    <div id="root"></div>

Add the following to your src/HelloWorld.js

import React, { Component } from 'react'

export default class HelloWorld extends Component {

  render() {
    return (
      <h1>Hello World</h1>


Now the following to your src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import HelloWorld from './HelloWorld'

  <HelloWorld />,

Now you can run npm start to build your app.


You can customize your build by setting options in your package.json under the clientBuild option. The following is an example config with default values passed in (note that comments are not valid json and are there just for description):

  // ...
  "clientBuild": {
    "build": "build",          // The relative path to the directory where your client build will end up
    "html": "index.html",      // The relative path to you index.html
    "src": "src",              // The relative path to your src directory. You need to have an `index.js` in this directory
    "tests": [                 // The glob patterns to use when searching for test files to be run. These are relative to your src directory
    "testSetup": "test/setup", // The paths to import before tests are run. This can be an array. These are relative to the root of your app
    "dashboard": true,         // Whether or not to use the webpack dashboard
    "proxy": null,             // Proxy options as used by webpack-dev-server
    "port": 8080,              // The port that the webpack-dev-server should listen on
  // ...

Current Tags

  • 0.1.0                                ...           latest (4 years ago)

3 Versions

  • 0.1.0 [deprecated]           ...           4 years ago
  • 0.0.2 [deprecated]           ...           4 years ago
  • 0.0.1 [deprecated]           ...           4 years ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 1
Dev Dependencies (2)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |