Installation

Setup Compiler

First you'll need to setup a compiler to strip away Flow types. You can choose between Babel and flow-remove-types.

Babel

Babel is a compiler for JavaScript code that has support for Flow. Babel will take your Flow code and strip out any type annotations. If you already use Babel in your project, see using Babel.

First install @babel/core, @babel/cli, @babel/preset-flow, and babel-plugin-syntax-hermes-parser with either Yarn or npm.

npm

npm install --save-dev @babel/core @babel/cli @babel/preset-flow babel-plugin-syntax-hermes-parser

Yarn

yarn add --dev @babel/core @babel/cli @babel/preset-flow babel-plugin-syntax-hermes-parser

Next you need to create a .babelrc file at the root of your project with the @babel/preset-flow preset and babel-plugin-syntax-hermes-parser plugin.

{
  "presets": ["@babel/preset-flow"],
  "plugins": ["babel-plugin-syntax-hermes-parser"],
}

If you then put all your source files in a src directory you can compile them to another directory by running:

./node_modules/.bin/babel src/ -d lib/

You can add this to your package.json scripts easily, alongside your "devDependencies" on Babel.

{
  "name": "my-project",
  "main": "lib/index.js",
  "scripts": {
    "build": "babel src/ -d lib/",
    "prepublish": "yarn run build"
  }
}

Note: You'll probably want to add a prepublish script that runs this transform as well, so that it runs before you publish your code to the npm registry.

flow-remove-types

flow-remove-types is a small CLI tool for stripping Flow type annotations from files. It's a lighter-weight alternative to Babel for projects that don't need everything Babel provides.

First install flow-remove-types with either Yarn or npm.

npm

npm install --save-dev flow-remove-types

Yarn

yarn add --dev flow-remove-types

If you then put all your source files in a src directory you can compile them to another directory by running:

./node_modules/.bin/flow-remove-types src/ -d lib/

You can add this to your package.json scripts easily, alongside your "devDependencies" on flow-remove-types.

{
  "name": "my-project",
  "main": "lib/index.js",
  "scripts": {
    "build": "flow-remove-types src/ -d lib/",
    "prepublish": "yarn run build"
  }
}

Note: You'll probably want to add a prepublish script that runs this transform as well, so that it runs before you publish your code to the npm registry.

Setup Flow

Flow works best when installed per-project with explicit versioning rather than globally.

Luckily, if you're already familiar with npm or yarn, this process should be pretty familiar!

Add a devDependency on the flow-bin npm package

npm

npm install --save-dev flow-bin

Yarn

yarn add --dev flow-bin

Add a "flow" script to your package.json

{
  "name": "my-flow-project",
  "version": "1.0.0",
  "devDependencies": {
    "flow-bin": "^0.257.1"
  },
  "scripts": {
    "flow": "flow"
  }
}

Run Flow

The first time, run:

npm

npm run flow init

Yarn

yarn run flow init

> my-flow-project@1.0.0 flow /Users/Projects/my-flow-project
> flow "init"

After running flow with init the first time, run:

npm

npm run flow

Yarn

yarn run flow

> my-flow-project@1.0.0 flow /Users/Projects/my-flow-project
> flow

No errors!

Setup ESLint

If you use ESLint, you can read our page on ESLint to set it up to support Flow.