Il y a 389 articles et 19 utilisateurs inscrits (ce bandeau est défini dans MediaWiki:Sitenotice)

« Installation de Mirador » : différence entre les versions

De AJLSM
Aller à la navigation Aller à la recherche
Mhymonet (discussion | contributions)
Mhymonet (discussion | contributions)
Ligne 34 : Ligne 34 :
</syntaxhighlight>
</syntaxhighlight>
* Installation des dépendances :
* Installation des dépendances :
<syntaxhighlight lang="bash">
$ npm install
</syntaxhighlight>
== Étape de l’installation pour Mirador 3 et permettre l'utilisation et la création de plugins ==
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" :
<syntaxhighlight lang="bash">
$ npm i -g nwb
</syntaxhighlight>
* Installation de Mirador nommée "mirador-demo-plugin":
<syntaxhighlight lang="bash">
$ 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
</syntaxhighlight>
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":
<syntaxhighlight lang="bash">
$ cd mirador-demo-plugin/
</syntaxhighlight>
* Ajouter mirador comme dépendance dev :
<syntaxhighlight lang="bash">
$ npm i --save-dev mirador@alpha
</syntaxhighlight>
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".
<syntaxhighlight lang="json">
{ 
  "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"
  },
}
</syntaxhighlight>
* 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.
<syntaxhighlight lang="bash">
<syntaxhighlight lang="bash">
$ npm install
$ npm install

Version du 3 mars 2023 à 12:39

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

  • 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

Étape de l’installation pour Mirador 3 et permettre l'utilisation et la création de plugins

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 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

Lancement

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

  • Pour mirador 2 :
$ grunt serve
  • Pour mirador 3 :
$ 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.