https://github.com/ahrefs/melange-from-scratch
Configure a melange project from scratch
https://github.com/ahrefs/melange-from-scratch
Last synced: 16 days ago
JSON representation
Configure a melange project from scratch
- Host: GitHub
- URL: https://github.com/ahrefs/melange-from-scratch
- Owner: ahrefs
- Created: 2025-12-03T15:42:19.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-12-05T14:25:05.000Z (8 months ago)
- Last Synced: 2026-06-12T22:31:11.405Z (about 1 month ago)
- Language: Reason
- Size: 3.11 MB
- Stars: 3
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Melange from scratch
A 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.
## Quick Start
```bash
make install # Install dependencies
make dev # Build and start dev server
```
Open http://localhost:8080 to see the React app!
## Melange configuration from scratch steps
### 1. Start with OCaml project ([commit](../../commit/56f7bf2))
```bash
opam exec -- dune init proj hello
```
### 2. Add Melange dependency ([commit](../../commit/f7df4b5))
Add to `dune-project`:
```diff
(depends
ocaml
dune
+ melange)
```
### 3. Configure Melange compilation ([commit](../../commit/eb98b02))
**dune-project:** Enable Melange
```diff
+(using melange 0.1)
```
**bin/dune:** Change from executable to melange.emit
```diff
-(executable
- (public_name hello-melange)
- (name main)
+(melange.emit
+ (target output)
(libraries hello_melange)
+ (module_systems commonjs))
```
**lib/dune:** Add melange mode
```diff
(library
(name hello_melange)
+ (modes melange))
```
**dune-project:** Add allow_empty to package
```diff
+ (allow_empty)
```
*Note: Required because `melange.emit` doesn't create installable artifacts like `executable` does*
### 4. Install Reason ([commit](../../commit/ae7576b))
Add to `dune-project`:
```diff
- (depends ocaml dune melange)
+ (depends ocaml dune melange reason)
```
### 5. Add Reason example file ([commit](../../commit/24bdd91))
Create `helloReason.re` with simple example
### 6. Install melange-webapi bindings ([commit](../../commit/b6e41a4))
**dune-project:** Add melange-webapi dependency
```diff
- (depends ocaml dune melange reason)
+ (depends ocaml dune melange reason melange-webapi)
```
**bin/dune:** Add melange-webapi library
```diff
(melange.emit
(target output)
- (libraries hello_melange)
+ (libraries hello_melange melange-webapi)
(module_systems commonjs))
```
### 7. DOM manipulation example ([commit](../../commit/c102b01))
Use melange-webapi to manipulate the DOM
### 8. Add esbuild bundler ([commit](../../commit/a54b34e))
Bundle JavaScript for browser with minification
### 9. Add development server ([commit](../../commit/070812a))
Install http-server and add `make dev` command
### 10. Add Day.js with bindings ([commit](../../commit/cc21888))
- Install Day.js npm package
- Create Reason bindings for Day.js
- Display formatted dates
### 11. Add Reason React ([commit](../../commit/5ae5c24))
- Install React and reason-react
- Create interactive counter component
- Full React app with hooks