Skip to main content

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 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 install --save-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.

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 install --save-dev flow-bin

Add a "flow" script to your package.json​

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

Run Flow​

The first time, run:

npm 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 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.