Kaliber React Bundle

!! Warning This package is currently for internal proof of concept at Kaliber. It needs work and cleaning up before it becomes useful to the public domain.

This project was inspired by create-react-app. We borrow parts that are useful to us but the result will be opionated for use within Kaliber.

Goals

• Quick to set up new project
• Bundle common deps in a single dependency for easy version management and updates
• Include development server with HMR
• Standardize configuration and common file locations
• Hide as much complexity as possible while still exposing enough config to make it work across projects
• Encourage uniform use of technologies across Kaliber React projects

Usage

npm install --save @kaliber/react-bundle

Add the start and build script to your project package.json

"scripts": {
  "start": "react-bundle start",
  "build": "react-bundle build"
}

Requirements

NPM >= 3, which comes with Node >= 5.

The code itself is also compatible with older versions of Node, since internally we use babel-node for running the scripts. But for bundling dependencies in a single module we rely on the behavior of NPM 3 which installs dependencies in a flat structure.

Dev Server Config

The start script launches the dev server. You can pass optional parameter to it to configure the port and proxy settings:

react-scripts start --proxyTarget http://localhost:9000 --proxyMatches 'api,content'

Available options are:

• --port: The port on which the dev server mounts. Defaults to 8000.
• --proxyTarget: The target to proxy calls to.
• --proxyMatches: The routes on which to match the proxy, as a comma seperated list. Defaults to api. Matches are converted to regexp so that api,content becomes [/^\/api\/.*/, /^\/content\/.*/]

Project structure assumptions

In order to make your project compatible with react-bundle the following assumptions are made:

• app/main.js is the entry point
• ... to be documented

Todo

• check out https://github.com/kriasoft/react-app
• figure out vendor bundle config. package.json?
• progress display for build
• use dotenv for config?
• try eslint config from create-react-app
• create app/static folder en copy to build output. Replace favicons en content in mobi3 proxy

Cleanup

• rename target -> build
• rename app -> src
• main.js -> index.js?