Projet pour le widget de diffusion d'un datafile de DiDo

Le widget de diffusion d'un datafile de DiDo est développé à l'aide de l'UI framework Quasar pour VueJS.

Le widget est construit comme un WebComponent.

Toutes les commandes pour développer, construire, tester et déployer le projet utilise des raccourcis. Pour voir comment sont construits ces raccourcis, vous pouvez regarder le fichier actions.sh

1. Phase de développement

Pour bénéficier des avantages de développement liés à VueJS et Quasar (linter, babel, hot reload, minification du css et du js, etc...), il faut utiliser l'application dans un container avec vue-cli.

Pour développer, vous pouvez lancer la commande suivante:

# par défaut c'est le port 8060
./actions.sh run-dev

# mais on peut définir un port particulier
./actions.sh run-dev 8020

Et un certain nombre de commandes à utiliser en développement:

# installer toutes les dépendances
./actions.sh install-dependencies

# ajouter une dépendance de prod
./actions.sh install-dependency {my_package}

# ajouter une dépendance de dev
./actions.sh install-dev-dependency {my_dev_package}

# faire un lint du code source
./actions.sh lint

# inspecter les versions d'une dépendance
./actions.sh inspect-dependency {my_package}


# faire un audit des dépendances de prod
./actions.sh audit

# faire un audit de toutes les dépendances (y compris les dépendances de dev)
./actions.sh audit-with-dev

# Inspecter la configuration webpack qui sera écrite dans le fichier webpack_conf_output.js
./actions.sh webpack-conf
# Vous pouvez passer tous les paramètres habituels d'inspection. Par exemple en mode production et verbeux
./actions.sh webpack-conf --mode production --verbose

# Construire le composant web (disponible dans dist)
./actions.sh build-wc

# Publier le composant web sur la registry npm
./actions.sh npm-publish

# Une simple action pour obtenir un shell
./action.sh shell

2. Pour la production

Vous pouvez construire l'image pour servir le composant web dans une page web servie dans un container nginx

./actions.sh build-prod

Vous pouvez la tester en local en donnant le port d'exposition et l'url de l'api de diffusion:

./actions.sh run-prod 8070 http://api.diffusion.dido.fr/v1

Ensuite vous accédez à une page présentant le widget http://127.0.0.1:8070/datafile/$rid?millesime=$millesime

3. Pipeline de CI

Un pipeline de CI existe pour construire et pousser l'image dans la registry docker du ministère. Les images existeront avec différents tags selon la branche: registry.gitlab.oshimae.rie.gouv.fr/cgdd/sdsed-bun/datalake/widget-diffusion-datafile

4. Web Component

Le pipeline et le dockerfile permet de générer une image nginx qui porte le composant web.

Vous pouvez sinon simplement utiliser le composant web publié sur npmjs dans n'importe que page web en intégrant le code html suivant à l'intérieur de la balise body:

<script src="https://unpkg.com/vue"><\/script>
<script src="https://unpkg.com/@cgdd-bun/dido-wc-millesime-datafile/dist/wc/dido-widget-diffusion-datafile.min.js"><\/script>
<dido-widget-diffusion-datafile
  url="http://api.diffusion.dido.fr/v1"
  rid="{{rid}}"
/>

Configuration du conteneur docker

Le conteneur docker est configurable par des variables d'environnement :

• API_URL configure l'URL de l'API à contacter (par défaut http://api.diffusion.dido.fr/v1)
• NGINX_PORT configure le port d'écoute de nginx (par défaut port 80)

Cette configuration est assurée par le script /docker-entrypoint.d/local_config.sh