@charloup/dido-wc-millesime-diffusion v1.1.0

Projet pour le widget de diffusion de DiDo

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

Le widget est construit comme un WebComponent.

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.

Vous pouvez builder l'image docker pour le dev:

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

docker run --rm -it \
  -e http_proxy=$http_proxy \
  -e https_proxy=$https_proxy \
  --name dido-widget-diffusion-dev \
  -p 8060:8080 \
  -v $(pwd):/app \
  --workdir /app \
  -u $(id -u):$(id -g) \
  node:16.1.0-stretch-slim yarn serve

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

# installer les dépendances
docker run --rm -it \
  -e http_proxy=$http_proxy \
  -e https_proxy=$https_proxy \
  -v $(pwd):/app \
  --workdir /app \
  -u $(id -u):$(id -g) \
  node:16.1.0-stretch-slim yarn install

# ajouter une dépendance
docker run --rm -it \
  -e http_proxy=$http_proxy \
  -e https_proxy=$https_proxy \
  -v $(pwd):/app \
  --workdir /app \
  -u $(id -u):$(id -g) \
  node:16.1.0-stretch-slim yarn add {my_new_package}

# faire un lint du code source
docker run --rm -it \
  -e http_proxy=$http_proxy \
  -e https_proxy=$https_proxy \
  -v $(pwd):/app \
  --workdir /app \
  -u $(id -u):$(id -g) \
  node:16.1.0-stretch-slim yarn run lint

# inspecter les versions d'une dépendance
docker run --rm -it \
  -e http_proxy=$http_proxy \
  -e https_proxy=$https_proxy \
  -v $(pwd):/app \
  --workdir /app \
  -u $(id -u):$(id -g) \
  node:16.1.0-stretch-slim yarn list --frozen-lockfile --pattern {my_package}

# faire un audit des packages
docker run --rm -it \
  -e http_proxy=$http_proxy \
  -e https_proxy=$https_proxy \
  -v $(pwd):/app \
  --workdir /app \
  -u $(id -u):$(id -g) \
  node:16.1.0-stretch-slim yarn audit --groups dependencies

# Construire le composant web (disponible dans dist)
docker run --rm -it \
  -e http_proxy=$http_proxy \
  -e https_proxy=$https_proxy \
  -v $(pwd):/app \
  --workdir /app \
  -u $(id -u):$(id -g) \
  node:16.1.0-stretch-slim yarn build

# Publier le composant web sur la registry npm
docker run --rm -it \
  -e http_proxy=$http_proxy \
  -e https_proxy=$https_proxy \
  -v $(pwd):/app \
  --workdir /app \
  -u $(id -u):$(id -g) \
  node:16.1.0-stretch-slim yarn npm_publish

2. Pour la production

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

docker build \
  --target prod \
  --build-arg http_proxy=$http_proxy \
  --build-arg https_proxy=$https_proxy \
  -t dido/widget-diffusion:prod .

Vous pouvez la tester en local en donnant en variable d'environnement l'url de l'api de diffusion:

docker run --rm -it \
  --name dido-widget-diffusion-prod \
  -e API_URL=https://data.statistiques.developpement-durable.gouv.fr/dido/api/v1 \
  -p 8070:80 \
  dido/widget-diffusion:prod

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

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-diffusion/dist/wc/dido-widget-diffusion.min.js"><\/script>
<dido-widget-diffusion
  library="https://unpkg.com/@cgdd-bun/dido-wc-millesime-diffusion/dist/wc/dido-widget-diffusion.min.js"
  url="http://api.diffusion.dido.fr/v1"
  rid="{{rid}}"
  millesime="{{millesime}}"
/>