Nous allons voir dans ce chapitre comment initialiser un projet Elm dans votre environnement de travail. Nous partons du principe que Node.js et Elm 0.19 sont déjà installés sur votre machine.

Créez un dossier et accédez-y avec votre terminal:

cd Desktop
mkdir mon-projet-elm
cd mon-projet-elm

Une fois le dossier racine de notre projet Elm créé nous allons l’initier:

elm init

Elm vous demande la permission de créer un fichier elm.json, répondez Yes!

Vous devriez obtenir un fichier json qui ressemble à cela:

{
 "type": "application",
 "source-directories": [
 "src"
 ],
 "elm-version": "0.19.0",
 "dependencies": {
 "direct": {
 "elm/browser": "1.0.1",
 "elm/core": "1.0.0",
 "elm/html": "1.0.0"
 },
 "indirect": {
 "elm/json": "1.0.0",
 "elm/time": "1.0.0",
 "elm/url": "1.0.0",
 "elm/virtual-dom": "1.0.2"
 }
 },
 "test-dependencies": {
 "direct": {},
 "indirect": {}
 }
}

Le fichier elm.json décrit votre projet c’est à dire la version de Elm que vous utilisez, les dépendances des packages de base et les dépendances que vous importerez par la suite.

Vous n’avez généralement pas besoin d’éditer ce fichier à la main. Pour importer de nouveaux packages, vous utiliserez la commande elm install nom_package dans votre terminal. Votre fichier elm.json se mettra à jour automatiquement.

Ce fichier indique tout ce que votre programme Elm à besoin et sera utile si vous souhaitez le reproduir dans un autre contexte.

Pour une description détaillée de ce fichier, consultez la page https://github.com/elm/compiler/blob/master/docs/elm.json/application.md

Elm vous a également créé un dossier /src vide dans lequel vous rangerez tous les fichiers de votre projet.

Par convention on commence un programme Elm avec un fichier que l’on nomme src/Main.elm

Elm vous propose deux façons de compiler votre programme en JavaScript:

1-/ elm make

Vous pouvez manuellement compiler votre programe dans votre terminal en tapant :

elm make src/Main.elm

Cela produira dans votre dossier /src un fichier index.html avec le fichier Main.elm (et toutes les dépendances) compilé en JavaScript et intégré au HTML. Vous pourrez l’ouvrir dans votre navigateur pour voir le résultat.

Si vous souhaitez générer un fichier elm.js à partir de votre module Elm Main.elm, tapez la ligne suivante à la racine de votre projet :

elm make src/Main.elm --output=elm.js

Vous pouvez aussi compiler plusieurs modules Elm dans un seul fichier JavaScript de la façon suivante :

elm make Header.elm Footer.elm Main.elm --output=elm.js

2-/ elm reactor

Elm propose également une interface graphique web plus conviviale. Placez-vous dans le dossier de votre projet et tapez la commande :

elm reactor

Ouvrez votre navigateur à l’adresse :

http://localhost:8000

Une page web avec tous vos fichiers Elm s’affiche. Cliquez simplement sur un fichier Elm mon-fichier.elm et celui-ci sera automatiquement complilé.

Elm est un langage qui vous permet de faire du “refactoring” facilement donc pas de panique. Vous pouvez partir sur un seul fichier puis si le nombre de lignes augmente, vous pourrez diviser ce fichier en plusieurs modules.

elm init génère intentionnellement le moins de fichiers possible pour ne pas dérouter les débutants.

Avec l’expérience, vous pourrez créer votre propre générateur de projet selon vos besoins à l’aide d’un :

git clone https://github.com/username/elm-my-recipe.git

Par exemple si vous souhaitez programmer une Single Page Application, vous pouvez initialiser vos projets à partir des ces “repositories” :

git clone https://github.com/evancz/elm-todomvc.git
git clone https://github.com/rtfeldman/elm-spa-example.git

Sources:

https://elm-lang.org/0.19.0/init

Disclaimer:
Etant un total débutant dans le langage Elm et la programmation fonctionnel, il se peut que des incompréhensions ou des erreurs se soient glissées dans mes explications. Si vous en remarquez, merci de me les signaler pour que je puisse les corriger au plus vite.