@charloup/dido-wc-dataset-diffusion v1.0.2
Projet pour le widget de diffusion d'un dataset de DiDo
Le widget de diffusion d'un dataset 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 bind-mounter l'application dans un container avec vue-cli.
Vous pouvez builder l'image docker pour le dev:
docker build \
--target dev \
--build-arg http_proxy=$http_proxy \
--build-arg https_proxy=$https_proxy \
-t dido/widget-diffusion-dataset:dev .
Pour développer, vous pouvez utiliser cette image tout simplement en lançant la commande suivante:
docker run --rm -it \
--name dido-widget-diffusion-datafile-dev \
-p 8060:8080 \
-v $(pwd):/app \
dido/widget-diffusion-dataset:dev
Et un certain nombre de commandes à utiliser en développement:
# installer les dépendances
docker run --rm -it \
-v $(pwd)/node_modules/:/app/node_modules \
-v $(pwd)/package.json:/app/package.json \
-v $(pwd)/yarn.lock:/app/yarn.lock \
-e http_proxy=$http_proxy \
-e https_proxy=$https_proxy \
--workdir /app \
node:16.1.0-stretch-slim yarn install
# ajouter une dépendance
docker run --rm -it \
-v $(pwd)/node_modules/:/app/node_modules \
-v $(pwd)/package.json:/app/package.json \
-v $(pwd)/yarn.lock:/app/yarn.lock \
-e http_proxy=$http_proxy \
-e https_proxy=$https_proxy \
--workdir /app \
node:16.1.0-stretch-slim yarn add {my_new_package}
# faire un lint du code source
docker run --rm -it \
-v $(pwd)/node_modules/:/app/node_modules \
-v $(pwd)/package.json:/app/package.json \
-v $(pwd)/babel.config.js:/app/babel.config.js \
-v $(pwd)/.eslintrc.js:/app/.eslintrc.js \
-v $(pwd)/vue.config.js:/app/vue.config.js \
-v $(pwd)/src/:/app/src \
--workdir /app \
node:16.1.0-stretch-slim yarn run lint
# inspecter les versions d'une dépendance
docker run --rm -it \
-v $(pwd)/package.json:/app/package.json \
-v $(pwd)/yarn.lock:/app/yarn.lock \
-e http_proxy=$http_proxy \
-e https_proxy=$https_proxy \
--workdir /app \
node:16.1.0-stretch-slim yarn list --frozen-lockfile --pattern {my_package}
# faire un audit des packages
docker run --rm -it \
-v $(pwd)/package.json:/app/package.json \
-v $(pwd)/yarn.lock:/app/yarn.lock \
-e http_proxy=$http_proxy \
-e https_proxy=$https_proxy \
--workdir /app \
node:16.1.0-stretch-slim yarn audit
# Construire le composant web (disponible dans dist)
docker run --rm -it \
-v $(pwd)/:/app \
-e http_proxy=$http_proxy \
-e https_proxy=$https_proxy \
--workdir /app \
node:16.1.0-stretch-slim yarn build
# Publier le composant web sur la registry npm
docker run --rm -it \
-v $(pwd)/:/app \
-e http_proxy=$http_proxy \
-e https_proxy=$https_proxy \
--workdir /app \
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-dataset: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-dataset-prod \
-e API_URL=https://data.statistiques.developpement-durable.gouv.fr/dido/api/v1\
-p 8070:80 \
dido/widget-diffusion-dataset:prod
Ensuite vous accédez à une page présentant le widget http://127.0.0.1:8070/dataset/$id
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-dataset
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 dans n'impôrte 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="./dido-widget-diffusion-dataset.min.js"><\/script>
<dido-widget-diffusion-dataset
url="http://api.diffusion.dido.fr/v1"
id="{{id}}"
/>