{"id":13495693,"url":"https://github.com/ml-in-barcelona/fullstack-reason-react-demo","last_synced_at":"2025-07-14T19:31:50.589Z","repository":{"id":63722883,"uuid":"539587078","full_name":"ml-in-barcelona/fullstack-reason-react-demo","owner":"ml-in-barcelona","description":"Demo to showcase server-reason-react with Melange","archived":false,"fork":false,"pushed_at":"2024-07-30T09:24:51.000Z","size":778,"stargazers_count":44,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-10-31T10:36:51.224Z","etag":null,"topics":["ocaml","react","reason","reasonml"],"latest_commit_sha":null,"homepage":"https://fullstack-reason-react-demo.fly.dev","language":"Reason","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ml-in-barcelona.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-21T16:36:49.000Z","updated_at":"2024-10-15T22:24:48.000Z","dependencies_parsed_at":"2024-01-16T09:54:09.484Z","dependency_job_id":"4ead51e2-a9b0-4ebb-b62c-9a8e9bbaa500","html_url":"https://github.com/ml-in-barcelona/fullstack-reason-react-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml-in-barcelona%2Ffullstack-reason-react-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml-in-barcelona%2Ffullstack-reason-react-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml-in-barcelona%2Ffullstack-reason-react-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ml-in-barcelona%2Ffullstack-reason-react-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ml-in-barcelona","download_url":"https://codeload.github.com/ml-in-barcelona/fullstack-reason-react-demo/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225994832,"owners_count":17556830,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ocaml","react","reason","reasonml"],"created_at":"2024-07-31T19:01:37.220Z","updated_at":"2025-07-14T19:31:50.582Z","avatar_url":"https://github.com/ml-in-barcelona.png","language":"Reason","funding_links":[],"categories":["Reason"],"sub_categories":[],"readme":"# fullstack-reason-react-demo\n\n\u003e **Warning**\n\u003e This repo is in constant flux as I'm polishing the experience with [`server-reason-react`](https://github.com/ml-in-barcelona/server-reason-react) and related tooling.\n\nA demo of a fullstack reason-react app using Melange and Dream. Code is written in Reason and compiled by both [Melange](https://github.com/melange-re/melange) and OCaml.\n\nDemoing [server-reason-react](https://github.com/ml-in-barcelona/server-reason-react).\n\n---\n\nThe app consist of 3 folders: `shared`, `server` and `client`, which encapsulates each compilation target defined by dune.\n\n## `client/`\n\nA folder that contains the code executed in the client only. It's defined in dune as a `melange.emit` to emit JavaScript from Reason via Melange. It uses all the ReScript goodies: Belt, Js, etc. Currently is tiny: client only renders the `Shared_js.App` component:\n\n```re\nswitch (ReactDOM.querySelector(\"#root\")) {\n| Some(el) =\u003e ReactDOM.render(\u003cShared_js.App /\u003e, el)\n| None =\u003e ()\n};\n```\n\n## `server/`\n\nAn executable that expose a dream app with a home route which serves an HTML page. Written in [server-reason-react](https://github.com/ml-in-barcelona/server-reason-react) and send it as a string with `ReactDOM.renderToString`\n\n## `shared/`\n\nThe folder contains the library for shared code between `client` and `server`. dune generates the two libraries `Shared_js` and `Shared_native` with `copy_files#` and the dependencies that matter for each compilation:\n\n```dune\n; shared/js/dune\n(library\n (name shared_js)\n (modes melange)\n (flags :standard -bs-jsx 3)\n (libraries reason_react bs_css bs_css_emotion))\n\n(copy_files# \"../*.re\")\n```\n\n```dune\n; shared/native/dune\n(library\n (name shared_native)\n (modes best) ; best means native and byte\n (libraries\n  server-reason-react.react\n  server-reason-react.reactDom\n  server-reason-react.js\n  server-reason-react.css)\n (preprocess\n  (pps server-reason-react.ppx)))\n\n(copy_files# \"../*.re\")\n```\n\n`Shared_js` is compiled by Melange to JavaScript while `Shared_native` by OCaml to a native library.\n\nThe code of shared consist of an app to demostrate a few usages of server-reason-react implementations, such as server-reason-react.css or server-reason-react.js.\n\n- `server-reason-react.css` is the implementation of bs-css in the server. Maintains the same API and does the same functionality as emotion.js but in the server. All Css.* methods are available and generates the hash of the classnames. It also adds a fn `Css.render_style_tag()` to render the resultant CSS in the page, with the intention to be called in native.\n- `server-reason-react.belt` is the implementation of [Belt](https://rescript-lang.org/docs/manual/latest/api/belt) in pure OCaml.\n- `server-reason-react.js` is an incomplete implementation of [Js](https://rescript-lang.org/docs/manual/latest/api/js)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fml-in-barcelona%2Ffullstack-reason-react-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fml-in-barcelona%2Ffullstack-reason-react-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fml-in-barcelona%2Ffullstack-reason-react-demo/lists"}