yawaramin / Fullstack Reason

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

Development mode

Follow these steps:

1. Install NodeJS (one-time setup)
2. Install Esy (one-time setup): npm install --global [email protected]
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 npm install (or use pnpm to save some disk space)
5. Run the services defined in Procfile either manually on different terminals, or using a process manager like Foreman/Overmind/Hivemind
6. Browse the frontend: http://localhost:5200/

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 dist directory: npm run dist
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.