jasim / fullstack-reason

A demo project that shows a fullstack ReasonML/OCaml app–native binary + webapp

Fullstack Reason Demo

This project shows a minimal fullstack ReasonML application. It has a

• Backend web server that compiles to a native binary using the Esy/dune compilation toolchain
• Frontend ReasonReact component that compiles to JavaScript using the BuckleScript toolchain
• Shared business logic used by both of the above

This is a proof-of-concept; you can customize it to your needs.

Try it out

At the moment unfortunately the backend may not work on Windows due to an issue with a dependency. I am trying to resolve it.

Follow these steps:

1. Install NodeJS (one-time setup)
2. Install Esy (one-time setup): npm install --global esy@latest
3. Set up the backend project: esy install (one-time setup but will take a while to compile dependencies like SSL so grab your favourite beverage)
4. Run the backend app: esy b dune exec backend/App.exe
5. In another terminal, build frontend: a. npm install (or use pnpm to save some disk space) b. npx bsb -clean-world c. npx bsb -make-world
6. Run the frontend (this is in development mode): npm run server
7. Browse the frontend: http://localhost:8000/

'Production' mode

You can also try out the app without the Webpack dev server:

1. Assuming the above builds have already been done
2. Put production assets in the build directory: npm run webpack:production
3. Run the backend app: esy b dune exec backend/App.exe
4. Browse the frontend (note, different port than above, this is being served directly from the backend app): http://localhost:8080/

Correctly caches the JS bundle–with cache busting!

How it works

This project pulls together:

• A working setup of the ReWeb Reason/OCaml native web framework
• A ReasonReact frontend app, using the BuckleScript OCaml-to-JS compiler

Project layout

These are the significant parts of the project:

• backend/: contains the sources for the backend executable
• esy.lock/: a lock directory used by Esy to capture precise dependency information
• frontend/: contains the sources for the frontend ReasonReact app
• shared/: contains sources shared between the backend and frontend
• bsconfig.json: BuckleScript project configuration
• dune-project: Dune project configuration (for the native build)
• esy.json: Esy project configuration (native package management)
• fullstack-reason.opam: OPAM project configuration (empty but needed for backward-compatibility with OPAM)
• package.json: Npm project configuration
• webpack.config.js: Webpack bundler configuration for the frontend

Honourable mention: build outputs are in the .gitignore.