Gatsby: Flow: How to implement flow in a gatsby project ?

[abumalick]

I searched in the examples and package folder and couldn't find something about it.

Has someone integrated flow in a gatsby project ?

I would like to use flow with this https://github.com/brigand/babel-plugin-flow-react-proptypes

[jquense]

Same way you might in a none gatsby project! Add the dependencies and Babel plugin and gtg

[abumalick]

okay, I will try that, thank you very much

[abumalick]

It worked very well, I didn't know that you can edit babel config so easily with gatsbyjs. Thank you very much for the tip @jquense.

[dustinhorton]

@abumalick Mind sharing your how it's setup?

[camsloanftc]

Edited based on @sarneeh's comment below, as you do not need to extend Gatsby's babel, as I had previously written.

In case this helps someone, we just did:

yarn add --dev flow-bin

then you should be able to run yarn run flow init to set up the .flowconfig file, and then run yarn run flow to check your files.

For a simple flow check, just follow the example at the docs. Don't forget to add // @flow to the top of your files.

Then, add whatever plugin you need to your editor to setup the flow highlighting, but that is a different topic.

[abumalick]

sorry @dustinhorton I didn't see your message.

Here is an example of a flow configuration with eslint and prettier : https://github.com/abumalick/gatsby-starter

You have some examples of using flow with React in src/components.

I really like these tools.

Maybe I could add this in starter kits.

[sarneeh]

Actually, as babel-preset-flow is part of babel-preset-react which is by default in Gatsby you don't need this additional configuration. flow-bin will be just enough 😄

[camsloanftc]

Oooh nice @sarneeh - updating now.

[arhtudormorar]

Check this setup out - for me it works.