Tuto - Environnement de dev mapstore2
72 views
Skip to first unread message
GaetanB
Dec 28, 2023, 6:02:49 AM12/28/23
to georchestra-dev
Bonjour,
Je viens de mettre en place un environnement de développement MapStore2 afin de procéder à des modifications dans le coeur. Je me dis que ca peut en intéresser d'autres.
Pour faire des développements dans MapStore2, nous n'avons pas besoin de MapStore2-georchestra.
Notre environnement devra comprendre 2 services frontend et backend.
# BACKEND
Je viens de mettre en place un environnement de développement MapStore2 afin de procéder à des modifications dans le coeur. Je me dis que ca peut en intéresser d'autres.
Pour faire des développements dans MapStore2, nous n'avons pas besoin de MapStore2-georchestra.
Notre environnement devra comprendre 2 services frontend et backend.
# BACKEND
> Prérequis : Docker
Pour le backend, j'ai choisi d'utiliser docker pour la simplicité de déploiement uniquement. Comme je ne vais pas modifier le backend, je n'ai pas plus d'intérêt à utiliser une autre solution.
Pour ne pas avoir à recréer mes contextes et utilisateurs, j'opte pour l'installation docker-compose + PostgreSQL + volume associé.
Le README est relativement clair à ce sujet :
https://github.com/geosolutions-it/MapStore2?tab=readme-ov-file#-run-the-mapstore-
A noter qu'il est possible de réutiliser le code source frontend que l'on modifie dans le docker-compose comme on peut le faire avec docker georchestra.
Gaëtan Bruel
JDev
https://github.com/geosolutions-it/MapStore2?tab=readme-ov-file#-run-the-mapstore-
with-postgis-through-docker-compose-in-the-local-environment
Avant de lancer les actions Docker, j'ai eu quelques soucis de connexion entre mapstore et postgres. J'ai donc procédé en deux groupe d'actions.
Etape 1 - conteneurs postgres / Proxy :
Avant de lancer les actions Docker, j'ai eu quelques soucis de connexion entre mapstore et postgres. J'ai donc procédé en deux groupe d'actions.
Etape 1 - conteneurs postgres / Proxy :
- Installer docker / compose / etc..
- Cloner le dépôt MapStore2
- ouvrir docker-compose.yml
- commenter la section mapstore
- exécuter la commande : docker compose up -d
Etape 2 - conteneur mapstore
- Ouvrir le fichier docker-compose.yml
- décommenter la section mapstore
- adapter les login / password pour la ligne command du wait-for-postgres
- exécuter la commande : docker compose up -d
Vous devez maintenant avoir une stack complète front + backend par défaut accessible sur localhost/mapstore.
Bien que fonctionnel, le frontend utilisé ici est issu d'un WAR et non d'un code source sur lequel nous allons développer.
# FRONTEND
> Prérequis : Node.js v16
Pour démarrer le frontEnd, c'est relativement simple :
Pour démarrer le frontEnd, c'est relativement simple :
- on installe Node.js version 16.x (via NVM c'est plus simple)
- on install via npm install
Mais en l'état, le frontend n'arrivera pas à utiliser le backend.
On doit donc modifier les constantes en haut du fichier devServer.js.
Dans mon cas, le backend (par défaut) fonctionne sur http://localhost/mapstore.
J'ai donc adapté le fichier tel que :
On doit donc modifier les constantes en haut du fichier devServer.js.
Dans mon cas, le backend (par défaut) fonctionne sur http://localhost/mapstore.
J'ai donc adapté le fichier tel que :
const port = "";
const protocol = "http";
const host = "localhost";
const MAPSTORE_BACKEND_BASE_URL = (protocol + "://" + host + ":" + port);
const MAPSTORE_BACKEND_BASE_PATH = "/mapstore";
const MAPSTORE_BACKEND_URL = MAPSTORE_BACKEND_BASE_URL + MAPSTORE_BACKEND_BASE_PATH;
Par défaut, ce fichier prend en compte des variables d'environnement :
Je les ai volontairement supprimé car je peux avoir plusieurs instances de développement / de test.
On peut maintenant démarrer le front qui utilisera le backend docker :
On peut maintenant démarrer le front qui utilisera le backend docker :
- exécute la commande npm run fe:start
Maintenant on peut accéder au frontend sur localhost:8081 qui utilisera le backend accessible sur localhost/mapstore.
A noter qu'il est possible de réutiliser le code source frontend que l'on modifie dans le docker-compose comme on peut le faire avec docker georchestra.
Gaëtan Bruel
JDev
GaetanB
Jan 10, 2024, 10:00:06 AM1/10/24
to georchestra-dev
Je complète ce billet avec les outils de développement qui sont plus qu'utiles.
On connaît tous la console de développement du navigateur.
Mais il est aussi bien de connaître les outils de développements à installer (module) dans votre navigateur.
Pour commencer, on peut déjà regarder la doc MapStore qui aborde ce sujet :
https://docs.mapstore.geosolutionsgroup.com/en/latest/developer-guide/developing/
Pour les outils qui suivent (notamment Redux dev tool) il faut passer en mode debug :
http://localhost:8081/?debug=true#
Ensuite pour le détail, on va utiliser 2 outils surtout pour des développements standards dans le coeur de MapStore2 :
Voici une vue Redux Dev Tool de l'ouverture de la table attributaire > passage en mode édition > sélection d'une feature :
On connaît tous la console de développement du navigateur.
Mais il est aussi bien de connaître les outils de développements à installer (module) dans votre navigateur.
Pour commencer, on peut déjà regarder la doc MapStore qui aborde ce sujet :
https://docs.mapstore.geosolutionsgroup.com/en/latest/developer-guide/developing/
Pour les outils qui suivent (notamment Redux dev tool) il faut passer en mode debug :
http://localhost:8081/?debug=true#
Ensuite pour le détail, on va utiliser 2 outils surtout pour des développements standards dans le coeur de MapStore2 :
- React Developer Tools (extension chrome)
> Use React Developer Tool to inspect React components, edit, props and state, and identify performance problems.
A l'installation, il faut penser à redémarrer son navigateur. Ensuite on ouvre la console de développement du navigateur et on voit un onglet "Components" et Profiler.
En synthèse, cet outil servira à voir le DOM version React. Ca permettra de faire un lien entre l'interface et les composants React.js utilisé dans le code de MapStore2.
On pourra notamment constater les états ou les propriétés des composants et les faire varier.
+ d'informations ici : https://react.dev/learn/react-developer-tools
En synthèse, cet outil servira à voir le DOM version React. Ca permettra de faire un lien entre l'interface et les composants React.js utilisé dans le code de MapStore2.
On pourra notamment constater les états ou les propriétés des composants et les faire varier.
+ d'informations ici : https://react.dev/learn/react-developer-tools
- Redux developer tool (extension chrome)
> Redux DevTools for debugging application's state changes. The extension provides power-ups for your Redux development workflow. Apart from Redux, it can be used with any other architectures which handle the state.
A l'installation, il faut penser à redémarrer son navigateur. Ensuite on ouvre la console de développement du navigateur et on voit un onglet "Redux".
Cette fenêtre est très utile pour observer les actions liées à l'IHM.
Cette fenêtre est très utile pour observer les actions liées à l'IHM.
Voici une vue Redux Dev Tool de l'ouverture de la table attributaire > passage en mode édition > sélection d'une feature :
Gaëtan B
GaetanB
Jan 24, 2024, 11:14:36 AM1/24/24
to georchestra-dev
Bonjour *,
Je complète la série avec des informations pour obtenir un mapstore2-georchestra type production qui permet d'être debug / non minifié et fonctionnel avec les outils de debug React / Redux comme décrit plus haut dans un environnement de développement...mais sur un georchestra accessible en ligne (e.g une recette).
En gros, sans la modification qui va suivre, mapstore est compacté et on ne peut pas réellement debug une erreur.
Je complète la série avec des informations pour obtenir un mapstore2-georchestra type production qui permet d'être debug / non minifié et fonctionnel avec les outils de debug React / Redux comme décrit plus haut dans un environnement de développement...mais sur un georchestra accessible en ligne (e.g une recette).
En gros, sans la modification qui va suivre, mapstore est compacté et on ne peut pas réellement debug une erreur.
La modification est relativement simple :
- On ouvre le fichier dans le submodule MapStore2 => MapStore2/build/buildConfig.js
- On recherche là où la variable "prod" est utilisée et on la remplace par false ou la valeur qui permet d'être en mode développement comme :
- Ligne 127 => mode: "development"
- Ligne 129 => minimize: false
- Ligne 158 ==> "_DEVTOOLS__": true
- Ligne 162 ==> 'NODE_ENV': '""'
- Ligne 183 ==> .concat(devPlugins)
- Ligne 313 ==> devtool: devtool
- On rebuild mapstore2-georchestra avec la commande ./build.sh dans le répertoire mapstore2-georchestra
- On récupère le fichier .war pour le re déployer dans le tomcat concerné (on oubliera pas de restart le service ensuite)
- On voit ensuite que dans la console les logs redux dev tool sont affichées (avec mapstore/?debug=true#/)
- On voit qu'on peut parcourir les fichiers
Attention :
Les fichiers non minifiés prennent plus de place et les logs de debug sont uniquement faites pour le mode développement.
Ce WAR n'est donc utile que pour tester des développements dans un environnement type de recette, et non pour un environnement de production.
Ce WAR n'est donc utile que pour tester des développements dans un environnement type de recette, et non pour un environnement de production.
Gaëtan Bruel (JDev)
GaetanB
Aug 5, 2024, 5:31:48 AM8/5/24
to georchestra-dev
Bonjour,
En l'état on a les images Nginx et Postgres et Postgres a bien démarré.
Nginx ne démarre pas car MapStore n'est pas démarré :
Un complément sur le démarrage docker pour aller dans le détail car je n'arrivais pas à reproduire ce que j'avais écris.
Objectifs:
- utiliser la compo docker à partir d'un clone
- démarrer mapstore avec docker (proxy Nginx / postgres / mapstore) .
Objectifs:
- utiliser la compo docker à partir d'un clone
- démarrer mapstore avec docker (proxy Nginx / postgres / mapstore) .
Version : 2023.02.xx
- On clone :
git checkout 2023.02.xx
- On lit les dépendances (fichier docker-compose.yml)
MapStore a besoin de Postgres (5432) pour démarrer (via script wait-for-postgres.sh ).
On lance la commande pour récupérer les images et créer les conteneurs Postgres et Nginx en premier :
- Créer les conteneurs Nginx et Postgres
On commente le bloc lié à mapstore (ligne 29 à 43).
En l'état, la commande docker-compose va générer une erreur car Nginx a besoin du service mapstore :
$ docker compose up -d
service "proxy" depends on undefined service mapstore: invalid compose project
On commente donc les lignes 52 et 35.
depends_on:
- mapstore
$ docker compose up -d
En l'état on a les images Nginx et Postgres et Postgres a bien démarré.
Nginx ne démarre pas car MapStore n'est pas démarré :
2024-08-05 11:22:28 2024/08/05 09:22:18 [emerg] 1#1: host not found in upstream "mapstore" in /etc/nginx/conf.d/default.conf:49
2024-08-05 11:22:28 nginx: [emerg] host not found in upstream "mapstore" in /etc/nginx/conf.d/default.conf:49
- Créer et démarrer le conteneur MapStore
On peut tout décommenter et relancer la commande $ docker compose up -d.
- Les conteneurs sont démarrés :
Vous pouvez maintenant utiliser ce backend comme décrit dans les posts précédents.
Gaëtan B
Reply all
Reply to author
Forward
0 new messages