How I deployed a ReasonML React app with Docker

ReasonML lets you write simple, fast and quality type safe code while leveraging both the JavaScript & OCaml ecosystems. Did you know that 50% of Facebook Messenger is in ReasonML. Check it out if you haven’t yet!

ReasonReact provides React bindings to work with ReasonML. I’ve put together a Dockerfile for creating a production image for a ReasonReact web app, this helps in the deployment of a ReasonReact web app, where the setup for the bs-platform, and the serve process have been configured.

This Dockerfile assumes that your directory structure is as follows:

├───Dockerfile
├─── app
     ├─── package.json
     └─── src/

1. A node:6 image is used, since the node:latest image had problems relating to global installation of bs-platform globally. [1][2]. There have been few workarounds, but node:6 does the same job without any problem.
2. Bucklescript’s bs-platform helps in compilation of ReasonML to readable JavaScript. It is installed globally so that the bs-platform installation layer is cached, and is not being done from scratch on every docker build.
3. The serve package is installed globally as well, which is responsible for serving the static site.
4. We then add the package.json to a container, and perform npm install on it, which would install all the required dependencies.
5. A symlink to the bs-platform is done with npm link bs-platform, which creates a symlink for yarn build to work as expected.
6. The source code from /src is copied to /app which is selected as the working directory, and yarn build is performed, to build the app.
7. With the serve package, the index.html at /build is getting served at port 8080.

Issues that I came across during implementation of this:

1. Doesn’t work with the service-worker PWA setting because you need to set a no-cache header on /service-worker.js as per: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#offline-first-considerations
2. This does not do server side rendering yet. Razzle is a tool which abstracts all the Server Side Rendering configuraton, it has an extension which works with ReasonReact as well: https://github.com/jaredpalmer/razzle/tree/master/examples/with-reason-react. I’ll implement SSR with ReasonReact sometime soon.

I’m currently interning at Hasura. With the Hasura platform, you can deploy anything that can be dockerized, with just a git push. So, I’ve put together a Hasura platform quickstart for ReasonML.

To try a sample ReasonML React project on the Hasura platform (it’s free and it’ll only take you few minutes)

1. Install the Hasura CLI tool
2. Run this command (you can copy the entire command below in one shot)

hasura quickstart anirudhm/hello-reasonml-react --type=hpdf && 
  cd hello-reasonml-react &&
  git add . && git commit -m "First commit" &&
  git push hasura master &&
  hasura microservice open www

The sequence of commands above will result in your browser window with a ReasonML app deployed. Make changes and git push to deploy again!

Read more about this quickstart here: https://hasura.io/hub/project/anirudhm/hello-reasonml-react.

I would love to hear your feedback on this, let me know in the comments below. :)

Hasura gives you instant GraphQL APIs over any Postgres database without having to write any backend code.

If you liked this post, do consider signing up for our mailing list to receive updates on all the content we publish.