Bringing ReasonML into an existing react app

I’ve brought reasonML into my side-project Shadowrun Creator and here are the steps I took to get everything working. I based most of my work off of the guide found at https://github.com/eanplatter/introduce-reason-example and it worked well for the most part.

First let’s install the modules we’ll need into our existing React app. Mine was bootstrapped with create-react-app and I had ejected right away. If you want to start with a pure ReasonML application start with reason-scripts which makes things dead simple.

If you’ve made it this far you’re interested in bringing some Reason into an existing react application.

yarn add reason-react reason-js
yarn add -D bs-platform

you’ll also need to add a bucklescript config called bsconfig.json to the root of your project.

{
"name" : "shadowrun-creator-react",
"reason" : { "react-jsx" : 2},
"bs-dependencies": ["reason-react", "reason-js"],
"sources": [
{
"dir": "src",
"subdirs": true,
}
],
"package-specs": {
"module": "commonjs",
"in-source": true,
}
}

Some things to note is that I wanted to have my reason files outputted to my source directory along side the existing javascript files. This is what the “in-source: true” line accomplishes. Also it tells bucklescript that we want to export commonjs modules.

One problem that I ran into was that eslint didn’t like the compiled bucklescript files.

Module build failed: TypeError: Cannot read property ‘node’ of undefined

I decided to use a convention of naming my reason files with <name>Reason.re so the output would be <name>Reason.js. This allowed me to add a line to my eslint ignore

**/*Reason.js

The last step was to add some additional scripts to the package.json

"buckle:up": "bsb -make-world -w",
"buckle:build": "bsb -make-world",
"buckle:clean": "bsb -clean-world",

I use circleci for my CI/CD so the only thing left was to add a line to run the buckle:build script before my usual build script.

More to come as I dive deeper into the world of ReasonML