Fullstack Reason Demo With GraphQL and Postgres

⚠️ THIS IS VERY WIP STILL

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
• GraphQL as a function leveraging ReWeb
• Type safe Postgres powered by PGOCaml

GraphQL

The GraphQL plug logic can be found at https://github.com/fakenickels/reweb-graphql-fullstack/blob/master/backend/Graphql_reweb.re.

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 Docker (one-time setup)
2. Install NodeJS (one-time setup)
3. Install Esy (one-time setup): npm install --global esy@latest
4. Boot up Postgres via Docker and keep it running in the background (necessary for PGOCaml) a. docker run -e POSTGRES_DB=reweb -p 6666:5432 -d --rm --name postgres postgres:latest
5. 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)
6. Run the backend app: esy b dune exec backend/App.exe
7. 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
8. Run the frontend (this is in development mode): npm run server
9. 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.