app

App

Branch	Status	Coverage
master
develop

Frontend Opentalent, avec NuxtJs 3

A voir :

• vuejs.org : Vue est le framework de base de l'application
• nuxtjs.org : Nuxt est une surcouche à Vue qui automatise et simplifie beaucoup de choses
• pinia.vuejs.org : Store library that allow you to share a state accross your components / pages
• pinia-orm.codedredd.de : Ajoute une gestion par modèles / repos au store Pinia
• vuetifyjs.com : Composants graphiques préconstruits
• typescriptlang.org : Typescript
• jestjs.io : Tests unitaires pour JS
• cypress.io : Tests end-to-end pour JS

Installation (mode dev)

Cloner le projet :

git clone git@gitlab.2iopenservice.com:opentalent/app.git

Installer les dépendances :

yarn install

Copier les certificats dans le répertoire env/ de ce projet :

• local.app.opentalent.fr.crt
• local.app.opentalent.fr.key

Lancer le serveur de développement :

yarn dev -o

Déploiement en prod

Premier déploiement en tant que service

On commence par cloner le projet app, puis par se placer dans le répertoire ainsi créé.

Pour déployer le projet en mode SSR, on commence par mettre à jour et compiler avec la commande custom :

yarn deploy

Cette commande est un alias qui équivaut à lancer :

git pull
yarn install
yarn build

Mettre à jour

Se placer dans le répertoire de l'application, puis lancer :

yarn deploy

Spécial : environnement de test

Attention, sur les environnements de test, il faut utiliser nvm pour exécuter la bonne version de node, exemple :

nvm exec yarn install

Autres

Lancer les tests

Pour lancer les tests unitaires :

jest

Générer la doc

Pour régénérer la documentation automatique :

yarn docs

Déboguer en prod ou en test

Sur les environnements où app est servie par supervisor, on peut consulter les logs d'erreur avec :

sudo supervisorctl tail -6000 app:app_00 stderr

le -6000 étant le nombre de bytes à afficher Voir plus : http://supervisord.org/running.html#supervisorctl-command-line-options

Faire fonctionner le HMR

Si le HMR (Hot Module Reload) ne fontionne pas et qu'un message d'erreur est logué en console disant que l'adresse n'est pas accessible, alors suivre les étapes suivantes :

• Ouvrir l'inspecteur de son navigateur, onglet Réseau
• Rafraichir la page
• Trouver la requête en erreur. Elle devrait être de la forme https://local.app.opentalent.fr:24678/_nuxt/
• Clic droit dessus, puis "ouvrir dans un nouvel onglet"
• Ajouter une exception de sécurité dans le navigateur

Plus d'infos

Structure du projet

Répertoire	Rôle
assets	Contient les fichiers style et medias
components	Les différents composants graphiques qui composent l'application
composables	Des fonctions conscientes du contexte applicatif, qui font le lien entre les pages et les services
config	La configuration de l'application
doc	Documentation du projet
lang	Les fichiers de traduction
layouts	Layouts des pages
middleware	Code exécuté avant le rendu des pages (ex: pour vérifier l'authentification)
models	Définition des entités (ou modèles)
node_modules	Modules node installés via npm
pages	Définition des pages qui composent l'application
plugins	Configuration des modules
public	Ressources statiques et publiques
services	Rassemble les classes utilitaires non graphiques et indépendantes du contexte applicatif
stores	Le store et ses composants servent d'entrepôt de donnés, et s'assurent de la cohérence de celles-ci
tests	Regroupe les tests (unitaires, end-to-end...)
types	Types Typescript (interfaces, enums...)