{"id":51524797,"url":"https://github.com/ahrefs/melange-from-scratch","last_synced_at":"2026-07-08T20:01:19.574Z","repository":{"id":362514585,"uuid":"1109287845","full_name":"ahrefs/melange-from-scratch","owner":"ahrefs","description":"Configure a melange project from scratch","archived":false,"fork":false,"pushed_at":"2025-12-05T14:25:05.000Z","size":3264,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-12T22:31:11.405Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/ahrefs.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-03T15:42:19.000Z","updated_at":"2026-05-26T14:01:09.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/ahrefs/melange-from-scratch","commit_stats":null,"previous_names":["ahrefs/melange-from-scratch"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ahrefs/melange-from-scratch","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahrefs%2Fmelange-from-scratch","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahrefs%2Fmelange-from-scratch/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahrefs%2Fmelange-from-scratch/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahrefs%2Fmelange-from-scratch/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ahrefs","download_url":"https://codeload.github.com/ahrefs/melange-from-scratch/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ahrefs%2Fmelange-from-scratch/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35276781,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-08T02:00:06.796Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-07-08T20:01:18.571Z","updated_at":"2026-07-08T20:01:19.568Z","avatar_url":"https://github.com/ahrefs.png","language":"Reason","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Melange from scratch\n\n![Melange from scratch](melange-from-scratch.png)\n\nA step-by-step guide to configure a Melange project, starting from the [standard OCaml starter project](https://ocaml.org/docs/your-first-program) (`opam exec -- dune init proj hello`) and progressing through setup until you have a working React application compiled from Reason.\n\n## Quick Start\n\n```bash\nmake install  # Install dependencies\nmake dev      # Build and start dev server\n```\n\nOpen http://localhost:8080 to see the React app!\n\n## Melange configuration from scratch steps\n\n### 1. Start with OCaml project ([commit](../../commit/56f7bf2))\n```bash\nopam exec -- dune init proj hello\n```\n\n### 2. Add Melange dependency ([commit](../../commit/f7df4b5))\nAdd to `dune-project`:\n```diff\n (depends\n   ocaml\n   dune\n+  melange)\n```\n\n### 3. Configure Melange compilation ([commit](../../commit/eb98b02))\n\n**dune-project:** Enable Melange\n```diff\n+(using melange 0.1)\n```\n\n**bin/dune:** Change from executable to melange.emit\n```diff\n-(executable\n- (public_name hello-melange)\n- (name main)\n+(melange.emit\n+ (target output)\n  (libraries hello_melange)\n+ (module_systems commonjs))\n```\n\n**lib/dune:** Add melange mode\n```diff\n (library\n  (name hello_melange)\n+ (modes melange))\n```\n\n**dune-project:** Add allow_empty to package\n```diff\n+ (allow_empty)\n```\n*Note: Required because `melange.emit` doesn't create installable artifacts like `executable` does*\n\n### 4. Install Reason ([commit](../../commit/ae7576b))\nAdd to `dune-project`:\n```diff\n- (depends ocaml dune melange)\n+ (depends ocaml dune melange reason)\n```\n\n### 5. Add Reason example file ([commit](../../commit/24bdd91))\nCreate `helloReason.re` with simple example\n\n### 6. Install melange-webapi bindings ([commit](../../commit/b6e41a4))\n\n**dune-project:** Add melange-webapi dependency\n```diff\n- (depends ocaml dune melange reason)\n+ (depends ocaml dune melange reason melange-webapi)\n```\n\n**bin/dune:** Add melange-webapi library\n```diff\n (melange.emit\n  (target output)\n- (libraries hello_melange)\n+ (libraries hello_melange melange-webapi)\n  (module_systems commonjs))\n```\n\n### 7. DOM manipulation example ([commit](../../commit/c102b01))\nUse melange-webapi to manipulate the DOM\n\n### 8. Add esbuild bundler ([commit](../../commit/a54b34e))\nBundle JavaScript for browser with minification\n\n### 9. Add development server ([commit](../../commit/070812a))\nInstall http-server and add `make dev` command\n\n### 10. Add Day.js with bindings ([commit](../../commit/cc21888))\n- Install Day.js npm package\n- Create Reason bindings for Day.js\n- Display formatted dates\n\n### 11. Add Reason React ([commit](../../commit/5ae5c24))\n- Install React and reason-react\n- Create interactive counter component\n- Full React app with hooks\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahrefs%2Fmelange-from-scratch","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahrefs%2Fmelange-from-scratch","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahrefs%2Fmelange-from-scratch/lists"}