Installation

Installing and setting up Flow for a project

There are a few ways to setup Flow depending on what tools you're already using.
You can customize this guide from the tools above.

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.

First install babel-cli and babel-preset-flow with either Yarn or npm.

yarn add --dev babel-cli babel-preset-flow

Next you need to create a .babelrc file at the root of your project with "flow" in your "presets".

{
  "presets": ["flow"]
}

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

yarn run babel src/ -- -d lib/

You can add this to your package.json scripts easily.

{
  "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:

yarn add --dev flow-bin

Run Flow:

yarn run flow

yarn run v0.15.1
$ flow
No errors!
✨  Done in 0.17s.

Note: you may need to run yarn run flow init before executing yarn run flow.

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.

First install babel-cli and babel-preset-flow with either Yarn or npm.

npm install --save-dev babel-cli babel-preset-flow

Next you need to create a .babelrc file at the root of your project with "flow" in your "presets".

{
  "presets": ["flow"]
}

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.

{
  "name": "my-project",
  "main": "lib/index.js",
  "scripts": {
    "build": "babel src/ -d lib/",
    "prepublish": "npm 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.102.0"
  },
  "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 Compiler

First you’ll need to setup a compiler to strip away Flow types. You can choose between Babel and 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.

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:

yarn run flow-remove-types src/ -- -d lib/

You can add this to your package.json scripts easily.

{
  "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:

yarn add --dev flow-bin

Run Flow:

yarn run flow

yarn run v0.15.1
$ flow
No errors!
✨  Done in 0.17s.

Note: you may need to run yarn run flow init before executing yarn run flow.

Setup Compiler

First you’ll need to setup a compiler to strip away Flow types. You can choose between Babel and 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 install --save-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.

{
  "name": "my-project",
  "main": "lib/index.js",
  "scripts": {
    "build": "flow-remove-types src/ -d lib/",
    "prepublish": "npm 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.102.0"
  },
  "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!
← Getting Started Usage →

Was this guide helpful? Let us know by sending a message to @flowtype.