React Rollup Boilerplate

A boilerplate for building React libraries.

Included

• React with recompose
• Rollup with Babel, SCSS and other plugins:
  • Node Resolve
  • CommonJS
  • Uglify
  • Alias
• styled-components with default stylelint support
• Monorepo support with Lerna
• Run tests with Jest
• Code Coverage reporting with Codecov
• Dev sandbox and documentation with Storybook
• Structural and interaction testing with Enzyme
• Type checking with Flow
• JS style check with ESLint using AirBnb style guide

Setup

Install the latest Node JS LTS and Yarn and simply run yarn bootstrap command in the root project directory.

Local development

During development,

yarn start # watch, build, and serves packages

Including NPM packages

yarn add <package-name> --dev # for dev tools, story dependencies, libraries to be bundled
yarn add <package-name> [--peer] # for external dependencies (Note: Include in externals from rollup.config.common.js whenever update)
yarn lerna add <package-name> [--dev] packages/<target-package-name>] # Add/link a package to all or specific local package(s). See section: Including local packages

Including local packages

This boilerplate supports Monorepo configurations out of the box and will watch, build, serve any local packages. Each package should have src/index.js entry file. Additionally, it may include stories.js or *.stories.js files to include stories.

By default, local packages are independently versioned. You may import your own repos with Lerna or create your own sub-packages using NPM:

yarn lerna import <path-to-external-repository> # import a repository to packages/
# or 
mkdir packages/<my-package> && cd <my-package> && yarn init

See Lerna's offical readme for a configuration and usage guide.

You can also give alias to source files of the packages in order to work with Visual Studio Code's Intellisense. See jsconfig.json and usage.

Main Package

By default, the lerna.json defines the main package at the root. You may opt-out of this configuration manually, by removing its settings and any alias references to its directory or package.

Note, the main package has one limitation: it cannot include any non-published packages.

Static Types

yarn flow-typed-install # clean & install flow definitions
yarn flow-typed-update # downloads and updates new flow definitions
yarn flow # performs type checking on files

Lint

yarn lint # runs linter to detect any style issues (css & js)
yarn lint:css # lint only css
yarn lint:js # lint only js
yarn lint:js --fix # attempts to fix js lint issues

Test

yarn test # runs functional/unit tests using Jest
yarn test --coverage # with coverage

You can also inspect tests in debug mode within Visual Studio Code.

Other scripts

yarn build # builds all packages
yarn build:dev [--environment PACKAGES:<*,package-name>] # builds sources for development, optionally provide environment variable to specify local package(s) e.g. yarn build:dev --environment PACKAGES:default-export,package-* (glob pattern supported)
yarn build:prod [--environment PACKAGES:<*,package-name>] # builds sources for production
yarn watch [--environment PACKAGES:<*,package-name>]# watches dev builds
yarn dist # builds all packages and publishes to npm