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 &&

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.


Hasura is an open-source engine that gives you realtime GraphQL APIs on new or existing Postgres databases, with built-in support for stitching custom GraphQL APIs and triggering webhooks on database changes.


Hasura

Hasura

The Hasura GraphQL Engine gives you realtime, high performance GraphQL on any Postgres app. Now supports event triggers for use with serverless.

Read More