Installation de Mirador

Contexte

Le but ici est d’installer mirador en local, la méthode est la même pour les version 2 et 3 à quelques exceptions près comme montré dans les étapes ci-dessous.

Étape de l’installation

Pour les version 2 et 3

• Installation de node:

$ sudo apt install nodejs

• Installation de npm :

$ sudo apt install npm

• Installation de grunt :

$ sudo npm install -g grunt-cli

• Clone du projet :

Pour Mirador 2 :

$ git clone https://github.com/projectmirador/mirador2

Pour Mirador 3 :

$ git clone https://github.com/ProjectMirador/mirador

• Se placer de le dossier :

Pour Mirador 2 :

$ cd mirador2/

Pour Mirador 3 :

$ cd mirador/

• Installation des dépendances :

$ npm install

Pour la version 3 avec plugin

Pour Mirador 3, si on souhaite pouvoir utiliser et créer des plugins, il faut l'installer d'une certaine manière. Cette installation nécessitera de pouvoir utiliser la commande "npm".

• Installation de "nwb" :

$ npm i -g nwb

• Installation de Mirador nommée "mirador-demo-plugin":

$ nwb new react-component mirador-demo-plugin
Creating a react-component project...
? Do you want to create an ES modules build for use by compatible bundlers? Yes
? Do you want to create a UMD build for global usage via <script> tag? Yes
? Which global variable should the UMD build set? MiradorDemo
  create .gitignore
  create .travis.yml
  create CONTRIBUTING.md
  create README.md
  create demo/src/index.js
  create nwb.config.js
  create package.json
  create src/index.js
  create tests/.eslintrc
  create tests/index-test.js
✔ Installing react and react-dom

Après cette installation, nous aurons donc les fichiers de base qui se seront crées.

• Déplacement dans le projet nommé "mirador-demo-plugin":

$ cd mirador-demo-plugin/

• Ajouter mirador comme dépendance dev :

$ npm i --save-dev mirador@alpha

Cela va servir à utiliser l'import de mirador pour créer des plugins derrière.

• Vérifier les dépendances :

Pour les vérifier, il suffit de regarder dans le fichier "package.json" qui se trouve à la racine du projet. On va ici vérifier que les dépendances liés à "mirador", "react" et "react-dom" apparaissent dans la partie "peer dependencies".

{  
  "peerDependencies": {
    "mirador": "^3.0.0-rc.7",
    "react": "16.x",
    "react-dom": "16.x"
  },
  "devDependencies": {
    "mirador": "^3.0.0-rc.7",
    "nwb": "0.23.x"
  },
}

• Installer les dépendances :

Et enfin, après avoir vérifier qu'elles étaient là, il manque plus qu'à installer les dépendances pour finaliser l'installation.

$ npm install

Changement de port

Pour éviter toutes sortes de conflits avec d'autres application déjà en fonctionnement, il est possible de changer le port sur lequel on souhaite lancer Mirador.

Pour les version 2 et 3

Pour cela, il suffit de le changer dans le fichier suivant, qui se trouve à la racine du projet :

• Pour mirador 2 :

Gruntfile.js

• Pour mirador 3 :

webpack.config.js

Pour la version 3 avec plugin

• Via la commande "export" :

Pour cette version, il suffit de modifier la variable d'environnement "PORT", soit en modifiant le fichier ".env" et en lui ajoutant la ligne suivante :

PORT=3005

Soit en utilisant directement une commande :

$ export PORT=3005

Et tout cela en remplaçant bine évidemment "3005" par le port voulu.

• Via la commande de lancement :

Pour lancer cette version, on va lancer l'application à l'aide ce cette commande :

npm run parcel

Mais il possible de lui ajouter un paramètre "port" de la manière suivante :

npm run parcel -- --port 3005

Attention : Les deux "--" sont bien nécessaires sinon le port ne sera pas prit en compte.

Lancement

Pour ensuite lancer Mirador, il suffit d'utiliser la commande suivante :

• Pour mirador 2 :

$ grunt serve

• Pour mirador 3 (avec plugin ou pas) :

$ npm start

Il est ensuite possible d'y accéder via cette url :

http://localhost:8000

En remplaçant "8000" par le port associé au Mirador.