site logo
github logotwitter logolinkedin logo

ReasonML Create-React-App setup

A journey into ReasonML, December 28, 2018

This article is the first of a serie dedicated to ReasonML: A journey into ReasonML. This language, created by Facebook, featured in my 2018 “To Learn” list for quite some time. I finally taken the time to work on it. The year is wrapping up but it still count, right? The purpose of the serie is to share my experience learning ReasonML from zero as a JS engineer.

When developing with React, there is chance you’ve come accross create-react-app (CRA). It helps bootstrap your project allowing you to focus on your code rather than your build chain. Of course, one would look for such tool when starting with ReasonML. There was a project integrating with CRA which aimed at replacing react-scripts: reason-scripts. Unfortunately it is now deprecated. Instead the way to go is to keep CRA to handle your Javascript files as you would in any other of your React projects and use Reason tooling alongside. Reason powerful interoperability with JavaScript is enabled through BuckleScript. Thanks to it, you write your React code in ReasonML, BuckleScript compiles it to JavaScript and CRA will pick it up to build your app bundles.

For the actual setup I recommend this great tutorial by Khoa Nguyen, from the ReasonML community.

One thing I’d like to add from his tutorial is that you can either:

  • Run CRA in one terminal to watch JS files and also run bsb in another terminal to watch ReasonML files.
  • Rely on your editor plugin to run bsb.

Personally I prefer the former because sometimes I ran into issues where compilation errors were not picked up by the editor thus failing the build without knowing it.

Fix your entrypoint

By now, you should have CRA and the ReasonML tooling set up. But we need to add a little something. If you followed the tutorial I linked the JS files created by BuckleScript are suffixed by .bs.js however CRA configuration looks for an index.js file in your src/ folder. To satisfy this requirement, you just need to create it with the content:

import 'index.bs.js'

You have everything you need to start building awesome things. Happy hacking! 🎉

If you decide to have fun with ReasonML, as I did, I highly recommend you to join the ReasonML community on Discord. People there are really friendly and supportive. They helped me tremendously.


Jonas

Written by Jonas who lives in Lyon, France and he's passionate about Open Source and web development in general. Feel free to ping him on Twitter.