How to set up ReasonReact with Parcel and live reload

reasonreact

#1

Hi!

I did set up a ReasonReact page with Parcel and live reload recently and was told on the discord a guide for this was wanted, so here it is! Take note this guide is meant to be very barebones, so just to get you started. I’ve just started working with this language and it’s tools, so this is brand new to me.

This guide is written for users of macOS, but it’ll probably work just as well on a lot of linux distros.

Prerequisites

Installation guide

Create your project

$ mkdir project && cd project

Add a package.json file with the following contents, edit where appropriate.

{
  "name": "NAME HERE",
  "version": "1.0.0",
  "license": "MIT",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "reason-react": "^0.5.3"
  },
  "devDependencies": {
    "bs-platform": "^4.0.5",
    "bsb-js": "^1.1.7"
  },
  "scripts": {
    "build": "parcel build ./src/index.html",
    "dev": "parcel ./src/index.html ./src/*.re"
  }
}

Add a bsconfig.json file with the following contents, edit where appropriate.

{
  "name": "NAME HERE",
  "reason": {
    "react-jsx": 2
  },
  "sources": {
    "dir" : "src",
    "subdirs" : true
  },
  "package-specs": [{
    "module": "commonjs",
    "in-source": true
  }],
  "suffix": ".bs.js",
  "namespace": true,
  "bs-dependencies": [
    "reason-react"
  ],
  "refmt": 3,
  "warnings": {
    "error": "+5"
  }
}

Create a src/ directory

$ mkdir src

Add an index.html file in the src directory

<!doctype html>
<html>
  <head>
    <title>Title of page</title>
  </head>
  <body>
    <div id="index"></div>
    <script src="./Index.re"></script>
  </body>
</html>

Add an Index.re file in the src directory with the following content

module App = {
    let component = "App" |> ReasonReact.statelessComponent;
    let make = _children => {
        ...component,
        render: ({state, send}) => {
            <Component />;
        },
    }
};
ReactDOMRe.renderToElementWithId(<App />, "index");

Add a Component.re file in the src directory with the following content

let component = "Component" |> ReasonReact.statelessComponent;

let make = _children => {
    ...component,
    render: _self => {
        <div className="component">
            (ReasonReact.string("Hello world!")
        </div>
    },
};

Run yarn and yarn dev from the root folder

$ yarn && yarn dev

Visit your server and make sure to add /index.html to your url, usually this will be http://localhost:1234/index.html.
You should now have a web server running that will live reload when you edit your Reason files.

Happy coding!


#2

In my case I tried to upgrade the base react template to use parcel and I’m getting this error:

[18/18] Building src/ReactDOMRe.mlast.d
Fatal error: exception End_of_file
ninja: error: rebuilding 'build.ninja': subcommand failed
Failure: /usr/local/lib/node_modules/bs-platform/lib/ninja.exe
 Location: /Users/danielo/GIT/reason-trainer/node_modules/reason-react/lib/bs

Any idea why ? I just added parcel since the rest of the things were as described here.
Regards


#3

This is very weird :face_with_raised_eyebrow:

I just stop the server make an npm install ( I did that before!) and then started it again. It worked without problem.

Thanks ! This is way nicer than the default template


#4

Yeah I tried the update from the react template also and I ran into various problems. I bet it’s related to how the cleaning of bucklescript stuff needs to be done, but I don’t know enough yet to know exactly what.

Doing as clean install as often as possible as well as restarting frequently seems to do the trick :smiley:

I’m glad you like it :slight_smile: