Example project of using libraries with Melange

Created for the following video: https://www.youtube.com/watch?v=AaoFVekZANY

Relude opam pin command

This needs to be run manually once per project init on any new machine:

opam pin add -y relude.dev "https://github.com/reazen/relude.git#v2"

melange-video-using-libraries

A simple project template using Melange with opam.

If you are looking for a template with esy, check melange-esy-template.

Quick Start

make init

# In separate terminals:
make watch
make serve

When running make init, you may encounter an error like this:

[ERROR] Could not determine which packages to install for this switch:
  * Missing dependency:
    - melange >= 1.0.0
    no matching version

It means opam doesn't have the latest packages definitions from the opam-repository. To address this, first run opam update, then rerun make init.

React

React support is provided by reason-react. The entry point of the sample React app is src/ReactApp.re.

Commands

In opam / dune projects, our personal preference is to group commonly used commands in a Makefile. This is completely optional.

You can see all available commands by running make help or just make. Here are a few of the most useful ones:

make init: set up opam local switch and download OCaml, Melange and JavaScript dependencies
make install: install OCaml, Melange and JavaScript dependencies
make watch: watch for the filesystem and have Melange rebuild on every change
make serve: serve the application with a local HTTP server

JavaScript output

Since Melange compiles source files into JavaScript files, it can be used for projects on any JavaScript platform - not just the browser.

The template includes two melange.emit stanza for two separate apps. This stanza tells Dune to generate JavaScript files using Melange, and specifies in which folder the JavaScript files should be placed, by leveraging the target field:

The React app JavaScript files will be placed in _build/default/src/output/*.
The NodeJS app JavaScript files will be placed in _build/default/src/node/*.

So for example, src/Hello.ml (using OCaml syntax) can be run with node:

node _build/default/src/node/src/Hello.js

Similarly, _build/default/src/output/src/ReactApp.js can be passed as entry to a bundler like Webpack:

webpack --mode production --entry ./_build/default/src/output/src/ReactApp.js

trite / melange-video-using-libraries