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/core
, @babel/cli
, and @babel/preset-flow
with
either Yarn or npm.
yarn add --dev @babel/core @babel/cli @babel/preset-flow
Next you need to create a .babelrc
file at the root of your project with
"@babel/preset-flow"
in your "presets"
.
{
"presets": ["@babel/preset-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/core
, @babel/cli
, and @babel/preset-flow
with
either Yarn or npm.
npm install --save-dev @babel/core @babel/cli @babel/preset-flow
Next you need to create a .babelrc
file at the root of your project with
"@babel/preset-flow"
in your "presets"
.
{
"presets": ["@babel/preset-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.145.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.145.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!
Was this guide helpful? Let us know by sending a message to @flowtype.