Writing a client/server Eliom application

The code of this tutorial has been tested against Eliom 5.

In this chapter, we will write a collaborative drawing application. It is a client/server web application displaying an area where users can draw using the mouse, and see what other users are drawing at the same time and in real-time.

This tutorial is a good starting point if you want a step-by-step introduction to Eliom programming.

The final eliom code is available for download. Tag eliom-5.0 has been tested against Eliom 5.0.


To get started, we recommend using Eliom's distillery, a program which creates scaffolds for Eliom projects. The following command creates a very simple project called graffiti in the directory graffiti:

$ eliom-distillery -name graffiti -template basic.ppx -target-directory graffiti

My first page

Our web application consists of a single page for now. Let's start by creating a very basic page. We define the service that will implement this page by the following declaration:

open Eliom_content.Html5.D (* provides functions to create HTML nodes *)

let main_service =
    (fun () () ->
           (head (title (pcdata "Page title")) [])
           (body [h1 [pcdata "Graffiti"]])))

If you're using eliom-distillery just replace the content of the eliom-file by the above lines and run

$ make test.byte

This will compile your application and run ocsigenserver on it. (Refer to the manual on how to compile your project "by hand".)

Your page is now available at URL http://localhost:8080/graff.