Setting up a pure Reason project

The bsb binary includes a project generator. We'll use it to create a pure Reason project using the basic-reason theme. Run bsb -themes to see all available project templates:

Available themes: 
basic
basic-reason
generator
minimal
node
react
react-lite
tea

Since BuckleScript works with both OCaml and Reason, some themes are only for OCaml projects. That being said, feel free to mix OCaml's .ml files with Reason's .re files within any BuckleScript project.

In this chapter, we'll focus on using the basic-reason and react templates. If you're curious, the react-lite theme is like the react one, except webpack is replaced with a simpler, faster, and more reliable module bundler that is intended only for development purposes.

Let's first create a pure Reason project:

bsb -init my-first-app -theme basic-reason
cd my-first-app

When we open the project in our editor, we see the following project structure:

├── .gitignore
├── README.md
├── bsconfig.json
├── node_modules
│   ├── .bin
│   │   ├── bsb
│   │   ├── bsc
│   │   └── bsrefmt
│   └── bs-platform
├── package.json
└── src
    └── Demo.re

Overall, there isn't much here, which is kind of refreshing coming from JavaScript. In node_modules, we see bs-platform along with some binaries:

• bsb: The build system
• bsc: The compiler
• bsrefmt: This is essentially JavaScript's prettier, but for Reason

As we'll soon see, the bsb binary is used within npm scripts. This bsc binary is rarely used directly. The bsrefmt binary is used by editor plugins.

In Demo.re, we see a simple log message:

/* Demo.re */
Js.log("Hello, BuckleScript and Reason!");

package.json looks somewhat familiar. The scripts field shows our currently available npm scripts:

/* package.json */
{
  "name": "my-first-app",
  "version": "0.1.0",
  "scripts": {
    "build": "bsb -make-world",
    "start": "bsb -make-world -w",
    "clean": "bsb -clean-world"
  },
  "keywords": [
    "BuckleScript"
  ],
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "bs-platform": "^4.0.5"
  }
}

Run npm run build to compile Demo.re to JavaScript. By default, the compiled output appears right beside the source file as Demo.bs.js. How does it know which files to compile, and where to output them? That's where bsconfig.json comes in.