Using Ocsigen for Web Development with OCaml on Nitrous.IO

As I said in my last post, once you have configured OPAM on nitrous.io, it is quite easy to install additional OCaml libraries and framework. Ocsigen is a web development framework for OCaml. In this post we will see how to configure Ocsigen on nitrous.io to build a simple website with OCaml. To install Ocsigen, just use OPAM

opam install ocsigenserver

After installing Ocsigen we need to install Eliom to enable dynamic websites with Ocsigen. Again run the following command to install it from OPAM.

opam install eliom

If the installations were successful you will now have  a working Ocsigen setup on your machine. In order to test it out let's just create a simple website from the hello world example. Make a new folder in your box inside that copy the following example eliom source file.

 (* ************************************************************************** *)  
 (* Project: Ocsigen Quick Howto : Page                    *)  
 (* Description: Example of a simple page (The famous "Hello World"!)     *)  
 (* Author: db0 (db0company@gmail.com, http://db0.fr/)             *)  
 (* Latest Version is on GitHub: http://goo.gl/sfvvq              *)  
 (* ************************************************************************** *)  
 open Eliom_content  
 open Html5.D  
 open Eliom_parameter  
 (* ************************************************************************** *)  
 (* Application                                *)  
 (* ************************************************************************** *)  
 module Example =  
  Eliom_registration.App  
   (struct  
    let application_name = "example"  
    end)  
 (* ************************************************************************** *)  
 (* Service declaration                            *)  
 (* ************************************************************************** *)  
 let main =  
  Eliom_service.service  
   ~path:[]  
   ~get_params:unit  
   ()  
 (* ************************************************************************** *)  
 (* Service definition                             *)  
 (* ************************************************************************** *)  
 let _ =  
  Example.register  
   ~service:main  
   (fun () () ->  
    Lwt.return  
      (html  
        (head (title (pcdata "Hello World of Ocsigen")) [])  
        (body [h1 [pcdata "Hello World!"];  
            p [pcdata "Welcome to my first Ocsigen website."]])))  

In my box I saved this file as the example/example.eliom. Then I created example/static folder to host the static resources of the website. In order to build this file you can use the magic makefile provided by Ocsigen. Change the static dir to "./static" and  in server files put "example.eliom" , in addition I had to remove the "-noinfer" option from the file as the compiler was giving an error with it. Once you make these changes you can compile your eliom web application example.eliom by typing "make" on the console. It will create a directory structure as follows in the same directory.

The compiled web application is "example.cma". Now we need to launch the Ocsigen server with this web application. For that we take help of the following conf file. 

 <!-- ----------------------------------------------------------------------- -->  
 <!-- Project: Ocsigen Quick Howto                      -->  
 <!-- Description: Configuration file to launch the examples         -->  
 <!-- Author: db0 (db0company@gmail.com, http://db0.fr/)           -->  
 <!-- Latest Version is on GitHub: https://github.com/db0company/Gallery/   -->  
 <!-- ----------------------------------------------------------------------- -->  
 <ocsigen>  
  <server>  
   <port>3000</port>  
   <logdir>./tmp/</logdir>  
   <datadir>./tmp/</datadir>  
   <user></user>  
   <group></group>  
   <commandpipe>./tmp/ocsigen_command</commandpipe>  
   <mimefile>/home/action/.opam/4.01.0/etc/ocsigenserver/mime.types</mimefile>  
   <extension findlib-package="ocsigenserver.ext.ocsipersist-sqlite">  
    <database file="./tmp/ocsidb"/>  
   </extension>  
   <extension findlib-package="ocsigenserver.ext.staticmod"/>  
   <extension findlib-package="eliom.server"/>  
   <charset>utf-8</charset>  
   <debugmode/>  
   <host hostfilter="*">  
    <static dir="./static/" />  
    <eliom module="./example.cma">  
    </eliom>  
   </host>  
  </server>  
 </ocsigen>  

Save the above file as "example.conf" in the same directory and launch the server with the following command.

ocsigenserver -c example.conf 

 This is configure the server to run on the 3000 port as specified in "example.conf" and run the example application. You can test that the application is running using the Preview feature on nitrous.io.

Just use the 3000 port and then the web server should serve the following page in a new window.

This enables nitrous.io to be used as a web development environment for OCaml.  You can now use the Web IDE to develop web applications for OCaml in the same way as you can do for the default boxes supported by nitrous.io. 

Configuring OPAM for OCaml on Nitrous.IO

In the previous post I showed how to get a working OCaml compiler installed on a nitrous.io box.  We had to get the source code of OCaml from github and build it. It turns out there is a much easier way to get the compiler and all the necessary libraries. We can install the OPAM package manager inside our box and then use OPAM to download additional libraries. In order to configure OPAM on nitrous.io we follow the steps on the quick install page  for the binary installer of OPAM. Run the following commands in the terminal.

wget http://www.ocamlpro.com/pub/opam_installer.sh 

sh ./opam_installer.sh /home/action/.local/bin

The installer will guide you through the process of setting up and installing the OCaml compiler. Once the installation finishes you can use the OCaml system from console. You can also use OPAM to install additional libraries. Details on the usage of OPAM as a package manager are given here. By default it OPAM will install the libraries shown in the screenshot below.