RIEAU UI

Frontend de RIEAU

Développement

Prérequis

• Nodejs 10.15.3+ installé par exemple avec asdf nodejs avec les clés PGP importées au préalable.

Ce projet a été construit avec Create React App.

Local

Copier le .env.sample en .env.

Modifier dans le fichier les valeurs en fonction de l'environnement (par exemple REACT_APP_API_MOCK=true permet de désactiver l'API), puis lancer le serveur:

REACT_APP_API_MOCK=true
PUBLIC_URL=http://localhost:3000

npm start

Depuis le navigateur: http://localhost:3000.

Formatage du code

npm run prettier

Correction du code

npm run lint

Analyser la taille du bundle

npm run build
npm run analyze

Gestion des versions

Avec l'outil npm-version, par exemple pour l'ajout d'une fonctionnalité:

npm version minor -m "New feature..."

Bump de version

npm version 0.2.0 -m "Bump v0.2.0"

Tests unitaires

npm run test:unit

Tests intégration

• Pour éditer les tests avec l'API mockée (REACT_APP_API_MOCK=true):

On configure le fichier .env avec REACT_APP_API_MOCK=true.

On lance le serveur:

npm start

Puis on ouvre le studio Cypress:

REACT_APP_API_MOCK=true npm run cypress:open

• Pour exécuter les tests et enregistrer les videos et screenshots:

REACT_APP_API_MOCK=true npm run test:integration

Si on souhaite les exécuter avec l'API réelle, on exécute au préalable la stack du backend (cf. rieau-infra).

Puis on configure le fichier .env afin d'appeler le backend:

REACT_APP_API_MOCK=false
PUBLIC_URL=http://localhost:3000
REACT_APP_API_URL=http://localhost:5000
REACT_APP_SSO_APP_URL=http://localhost:8080/auth
REACT_APP_SSO_APP_REALM=rieau
REACT_APP_SSO_APP_CLIENT_ID=rieau

Enfin on exécute les tests en précisant que l'API est réelle:

REACT_APP_API_MOCK=false npm run test:integration

Ou pour les éditer avec le studio:

REACT_APP_API_MOCK=false npm run cypress:open

Pour aller plus loin

• Create React App documentation.

• React documentation.

Déploiements

Copier le .env.sample en .env.

Surcharger dans le shell les valeurs en fonction de l'environnement, puis construire:

npm run build

Github pages

Depuis la branche master:

REACT_APP_API_MOCK=true PUBLIC_URL="https://mtes-mct.github.io/rieau-ui" npm run deploy

Depuis le navigateur: https://mtes-mct.github.io/rieau-ui/.

Docker

• Build:

Pour une image configurable au runtime, modifier le .env:

PUBLIC_URL=___PUBLIC_URL___

Seul le path est modifiable au build en ajoutant: --build-arg REACT_APP_BASENAME=/path.

Ensuite construiser l'image:

docker build -t tristanrobert/rieau-ui .

• Run:

Il est possible de changer à l'exécution des variables d'environnement comme SERVER_PORT, le port d'écoute HTTP de NGINX par défaut à 3000, ou celles de l'application REACT comme REACT_APP_API_URL (cf. .env.sample).

Par exemple, spécifier PUBLIC_URL si le site est installé sur un autre domaine.

docker run -p 3000:3000 -e SERVER_PORT=3000 -e PUBLIC_URL=http://rieau.docker.localhost -e REACT_APP_API_URL=http://rieau.docker.localhost/api -e REACT_APP_SSO_APP_URL=http://sso.rieau.docker.localhost:8080/auth --name rieau-ui -d -t tristanrobert/rieau-ui

Seule REACT_APP_BASENAME n'est pas modifiable à l'exécution mais seulement au build (car utilisée par nginx comme répertoire).

Depuis le navigateur: http://localhost:3000.

• Publier:

Tagger une version semver et pousser la sur le registry:

docker tag tristanrobert/rieau-ui:[digestid] tristanrobert/rieau-ui:[semver]
docker push tristanrobert/rieau-ui:[semver]