Converting JS to ReasonML with Bindings — Part 1

Aws-Amplify Bindings w/ ReasonML

The rest of the Converting JS to ReasonML with Bindings Series can be found here: Part 1, Part 2, Part 3, Part 4.

I learn by trying whatever. In this case, whatever is converting some of this AWS Amplify boilerplate to ReasonML. Why? Because I use AWS and I use ReasonML. So I have to make it work, folks. That is programming, no?

The Gatsby Auth starter with AWS Amplify

Mostly ripped from @dabit3’s gatsby-auth-starter-aws-amplify

This auth starter implements a basic authentication flow for signing up signing in users as well as protected client side routing using AWS Amplify. Auth features:

• User sign up
• User sign in
• Multi-factor Authentication
• User sign-out

Getting Started

Create the project using the version from the pull request to fix the graphql issue.

Change into the new directory

Change into the new directory

Install & configure the AWS Amplify CLI. Note: we’re going to be using the multi environment CLI version as it is the newest version.

To see a video of how to configure the CLI, click here

Create a new AWS Amplify Project

$ amplify init

Here, walk through the following steps:

• Enter a name for the project YOURPROJECTNAME
• Enter a name for the environment master
• Choose your default editor: Visual Studio Code (or your editor of choice)
• Choose the type of app that you’re building javascript
• What javascript framework are you using react
• Source Directory Path: src
• Distribution Directory Path: public
• Build Command: npm run-script build
• Start Command: npm run-script develop

1. Push the updated project configuration to AWS. It will deploy a CloudFormation template that has an Amazon Cognito resource that enables user authentication.

Converting to ReasonML

Let’s try some low hanging fruit first to see if we can get it to work. This might be tricky since Gatsby is basically a build system with all kinds of rules we need to adhere to regarding file/folder structure and file naming conventions. So we will just try stuff, get errors, and figure out the errors as we go.

If we look at index.js we can see that it exports a component called IndexPage. Gatsbyjs expects that there is an index.js in the /pages directory. So we are going to have to reproduce exporting an a component called IndexPage from index.js using Reason. We need to duplicate this for this transformation to work. We can achieve this by creating a new file in this same pages directory called indexPage.re. We will name our component IndexPage but it doesn't really matter as we will be exporting whatever is in this file as default and re-exporting it.

This is what this simple page looks like in reason:

To deal with GatsbyLink I searched github with the following search GatsbyLink extension:.re search to see if anyone else had done it. I then investigated the results to see how they did it. It turns out they used a package called gatsby-link-reason which we can install with yarn add gatsby-link-reason. Go ahead and do that the add it to bs-dependencies in bsconfig.json. Which should now look like this:

After doing that, I had to re-run yarn watch for the index.re to compile. I then went to index.re and it still showed the red squiggly error marks. I'm in vscode so I hit CMD+SHIFT+P to open the command pallet and started typing Reload Window which is a command that will reload your vscode window. The error then went away.

As we are going to be using this file on the javascript side, we need to export it in a way that javascript can use it. This is called interop and we export it by add the following line to the bottom of our file.

The last thing we need to do to actually get this to work is change index.js so that it uses index.re.

Change index.js by replacing everything in it with the following:

Once I did this I got a couple of warnings errors that I had to work through even though the file compiled. First, my terminal, gatsby threw use strict eslint warning. I hit google clicked the second result which was a recent issue on the gatsby repo. The suggested add a blank .eslintrc to the root directory to overide the default config. Gatsby uses a default config since many devs, including me, have not mastered eslint. The truth is, I use reason to avoid all this eslint, javascript error foolishness. So i added the .eslintrc and the gatsby terminal output cleared up. I then got an error in index.js from the vscode eslint service. Back to Google to discover that I could disable the eslint checker in vscode via this stackoverflow post. I opened up setting in vscode by clicking code->preferences->settings from the top menu. I then typed in eslint, then looked for the EsLint:Enable box and unchecked it. The error went away. I don't know if this will cause additional issues later but my gut instinct is I dont care because I am not using JS for anything but importing reasonML.

Yes, people, this is how development looks for me. Feel free to suggest a better way if there is one. Thanks in advance.

Now run `yarn dev` or `gatsby develop` and check your browser. We should have the mostly the same result as we previously had from `index.js`. We have not yet implemented the imported `Layout.js` or `Amplify.configure` function. We might do that next.

Show me the code.