FormidableLabs/builder-react-app

Name: builder-react-app

Owner: Formidable

Description: A React app archetype for builder

Created: 2015-10-19 22:01:10.0

Updated: 2016-11-14 05:41:08.0

Pushed: 2017-08-02 23:55:22.0

Homepage:

Size: 78

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Builder Archetype: React App

A React app archetype for builder.

This archetype provides both a robust set of scripts and default configs for a standard React app project as well as a builder-init compatible app generator for bootstrapping a new react app using this archetype.

Features provided by this archetype's scripts:

• spawning a node server with options for dev and hot-reload modes
• spawning a webpack server with options for dev and hot-reload modes
• running eslint using sensible default rules for client and server scripts and their associated tests
• building production assets
• running tests including client unit tests (karma), server REST and unit tests (mocha), and functional tests (mocha)
• generating coverage reports for client, server and functional tests using istanbul
• helper scripts that group common scripts together

Features provided by the builder-init compatible app generator

• uses the builder-react-app archetype for ease of script and config management
• redux for state management
• react-router for routing
• express for API and app routes
• server-side react rendering w/ bootstrapped data

Installation

To use the production and development workflows, install both this package and the development module:

m install --save builder-react-app
m install --save-dev builder-react-app-dev

Before functional tests can be run, you will need to also run:

ilder run install-dev

See the development guide for information about using the builder command.

Generator

To bootstrap a new project from scratch with template files from this archetype, you can use builder-init:

m install -g builder-init
ilder-init builder-react-app

This will download this archetype, prompt you for several template data values and inflate the archetype templates to real files at a chosen directory.

Project Structure

See the development guide for workflows associated with this archetype.

The archetype assumes a file structure like the following:

er
dex.js

ient/
spec/
  *.jsx?
main.js
test.html
nc/
spec/
  *.spec.js
setup.dev.js
setup.js
rver/
rest/
  *.spec.js
spec/
  *.spec.js
setup.js
lderrc
age.json

This matches the builder-init templates found in the source of this archetype.

Usage Notes

Babel

This archetype does not currently specify its own .babelrc. Your project should specify its own in the root directory if you want non-default Babel settings (like using stage 2, for instance), use a .babelrc like so:

tage": 2,
onStandard": true

Tasks

ilder help

e:

ilder <action> <task(s)>

ons:

n, concurrent, envs, help

s: General

builderrc: Path to builder config file (default: `.builderrc`)

help: Display help and exit

version: Display version and exit

s:

m:start
[builder-react-app] node server/index.js

ild
[builder-react-app] webpack --config node_modules/builder-react-app/config/webpack/webpack.config.js

eck
[builder-react-app] builder concurrent lint test

eck-ci
[builder-react-app] builder concurrent lint test-ci

eck-ci-win
[builder-react-app] builder concurrent lint test-ci-win

eck-cov
[builder-react-app] builder concurrent lint test-cov

eck-dev
[builder-react-app] builder concurrent lint test-dev

v
[builder-react-app] builder concurrent server-wds-test server-wds-dev server-dev

t
[builder-react-app] builder concurrent server-wds-test server-wds-hot server-hot

stall-dev
[builder-react-app] selenium-standalone install

nt
[builder-react-app] builder run lint-client && builder run lint-client-test && builder run lint-server && builder run lint-server-test

nt-client
[builder-react-app] eslint --ext .js,.jsx -c node_modules/builder-react-app/config/eslint/.eslintrc-client client templates

nt-client-test
[builder-react-app] eslint --ext .js,.jsx -c node_modules/builder-react-app/config/eslint/.eslintrc-client-test test/client

nt-server
[builder-react-app] eslint -c node_modules/builder-react-app/config/eslint/.eslintrc-server server shared

nt-server-test
[builder-react-app] eslint -c node_modules/builder-react-app/config/eslint/.eslintrc-server-test test/server test/func

od
[builder-react-app] builder concurrent watch server sources

rver
[builder-react-app] nodemon --watch client --watch server --watch templates --ext js,jsx server/index.js

rver-dev
[builder-react-app] builder envs server '[{"WEBPACK_DEV":true}]'

rver-hot
[builder-react-app] builder envs server '[{"WEBPACK_HOT":true}]'

rver-wds-dev
[builder-react-app] webpack-dev-server --config node_modules/builder-react-app/config/webpack/webpack.config.dev.js --progress --colors --port 2992

rver-wds-hot
[builder-react-app] webpack-dev-server --config node_modules/builder-react-app/config/webpack/webpack.config.hot.js --hot --progress --colors --port 2992 --inline

rver-wds-test
[builder-react-app] webpack-dev-server --port 3001 --config node_modules/builder-react-app/config/webpack/webpack.config.test.js --colors

urces
[builder-react-app] http-server -p 3001 .

st-base
[builder-react-app] builder run test-client && builder run test-server && builder run test-func

st-ci
[builder-react-app] builder run test-client-ci && builder run test-server-cov && builder run test-func-cov

st-ci-win
[builder-react-app] builder run test-client-ci-win && builder run test-server && echo 'TODO(36) fix Appveyor test-func'

st-client
[builder-react-app] karma start node_modules/builder-react-app/config/karma/karma.conf.js

st-client-ci
[builder-react-app] karma start --browsers PhantomJS,Firefox node_modules/builder-react-app/config/karma/karma.conf.coverage.js

st-client-ci-win
[builder-react-app] karma start --browsers PhantomJS,IE node_modules/builder-react-app/config/karma/karma.conf.js

st-client-cov
[builder-react-app] karma start node_modules/builder-react-app/config/karma/karma.conf.coverage.js

st-client-dev
[builder-react-app] karma start node_modules/builder-react-app/config/karma/karma.conf.dev.js

st-cov
[builder-react-app] builder run test-client-cov && builder run test-server-cov && builder run test-func-cov

st-dev
[builder-react-app] builder run test-client-dev && builder run test-server && builder run test-func-dev

st-func
[builder-react-app] mocha --opts node_modules/builder-react-app/config/mocha/func/mocha.opts test/func/spec

st-func-cov
[builder-react-app] istanbul cover --config node_modules/builder-react-app/config/istanbul/.istanbul.func.yml _mocha -- --opts node_modules/builder-react-app/config/mocha/func/mocha.opts test/func/spec

st-func-dev
[builder-react-app] mocha --opts node_modules/builder-react-app/config/mocha/func/mocha.dev.opts test/func/spec

st-server
[builder-react-app] builder concurrent test-server-unit test-server-rest

st-server-cov
[builder-react-app] builder concurrent test-server-unit-cov test-server-rest-cov

st-server-rest
[builder-react-app] mocha --opts node_modules/builder-react-app/config/mocha/server/mocha.opts test/server/rest

st-server-rest-cov
[builder-react-app] istanbul cover --config node_modules/builder-react-app/config/istanbul/.istanbul.server-rest.yml _mocha -- --opts node_modules/builder-react-app/config/mocha/server/mocha.opts test/server/rest

st-server-unit
[builder-react-app] mocha --opts node_modules/builder-react-app/config/mocha/server/mocha.opts test/server/spec

st-server-unit-cov
[builder-react-app] istanbul cover --config node_modules/builder-react-app/config/istanbul/.istanbul.server-unit.yml _mocha -- --opts node_modules/builder-react-app/config/mocha/server/mocha.opts test/server/spec

tch
[builder-react-app] webpack --config node_modules/builder-react-app/config/webpack/webpack.config.js --watch --colors