@ksmithut/client-build
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.
Installation
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-buildThen 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>
<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
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'
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):
{
// ...
"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
}
// ...
}