npm package: @ksmithut/client-build
Description: An opinionated client build process tool
Author: ksmithut
Latest version: 0.1.0
Deprecated: Unsupported

# @ksmithut/client-build

A client build runner focused on simplicity and rapid development.

This borrows heavily from [`create-react-app`][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.

# Installation

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

```sh
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:

```js
{
  "scripts": {
    "start": "client-build start",
    "build": "client-build build",
    "test": "client-build test"
  }
}
```

Add the following to your index.html:

```html
<!DOCTYPE html>
<html>
  <head>
    <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>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
```

Add the following to your src/HelloWorld.js

```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

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

ReactDOM.render(
  <HelloWorld />,
  document.getElementById('root')
)
```

Now you can run `npm start` to build your app.

# Options

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

```js
{
  // ...
  "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
      '**/__tests__/*.js',
      '**/*.spec.js',
      '**/*.test.js',
    ],
    "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
  }
  // ...
}
```

[create-react-app]: https://github.com/facebookincubator/create-react-app