Skip to content

Latest commit

 

History

History
executable file
·
116 lines (75 loc) · 4.54 KB

DEVELOPMENT.md

File metadata and controls

executable file
·
116 lines (75 loc) · 4.54 KB
Raw

Development Guide

Setup

Install the latest LTS Node and Yarn and simply run yarn node ./bootstrap.js in the root project directory.

Local development

During development,

yarn start # watch, build, and serves packages
# or
yarn dev # same as above, but includes development sources and maps

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 workspace <workspace-name> add <package-name>@* [--dev] # Add/link a package to a specific local package. See section: Including local packages

Note: All packages are installed using the PnP strategy by default. To see advantages, visit the official Yarn docs. Some tools however, such as Flow, are not compatible with the PnP resolution strategy. In order to circumvent you can opt out by installing non PnP configurations as a seperate Yarn project. For example, see Static Types.

Local packages and commands

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. Refer to Yarn's CLI docs for more information on running workspace commands.

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

Static Types

Installing Types

yarn flow-typed-install # clean & install flow definitions from dependencies and peerDependencies
yarn flow-typed-update # downloads and updates new flow definitions
cd packages/flow-deps && yarn install <package-name> # install any node modules that flow cannot resolve with PnP strategy

Creating Stubs

yarn flow-typed-create-stub <package-name> # create a flow-typed stub for a package name into shared/flow-typed/npm

Note: Since the shared/flow-typed/npm is ignored, it is best to move the stub file so it can be committed.

Run Flow

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

To get linting hints in VSCode, install ESLint extension (dbaeumer.vscode-eslint) from extensions marketplace.

Troubleshooting ESLint extension

  1. Ensure you are running VSCode with the node version you have yarn installed on.
  2. If above step doesn't work after restart, copy .pnp.loader.mjs to a safe location. e.g. Linux cp ./.pnp.loader.mjs /absolute/path/to/.pnp.loader.mjs. Then update user settings:
    "eslint.runtime": "node"
    "eslint.execArgv": ["--loader", "/absolute/path/to/.pnp.loader.mjs"]

Local Package Resolve

ESlint

Can be configured in .eslintrc.json using the Alias Resolver plugin.

Flow

Can be configured in .flowconfig.json with the module.name_mapper option.

Test

yarn test # runs functional/unit tests for all packages

Supports the PACKAGES variable. You can also inspect all tests in debug mode within Visual Studio Code.

Coverage

Coverage will be uploaded to your codecov account, individually for packages by using each package's name as a flag.

Other scripts

yarn build # builds sources for prod and dev
yarn build:dev # builds sources for development
yarn build:prod # builds sources for production

yarn watch # watches dev builds
yarn dist # builds all packages and publishes to npm

Supports the PACKAGES variable.

Environment Variables

PACKAGES

Some scripts optionally allow the environment variable to specific local packages(s) (in Glob format) for running scripts e.g. PACKAGES=default-export,package-* yarn test