# App [![Latest Release](http://gitlab.2iopenservice.com/opentalent/app/-/badges/release.svg)](http://gitlab.2iopenservice.com/opentalent/app_nuxt3/-/releases) | Branch | Status | Coverage | | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | master | [![pipeline status](http://gitlab.2iopenservice.com/opentalent/app/badges/master/pipeline.svg)](http://gitlab.2iopenservice.com/opentalent/app/-/commits/master) | [![coverage report](http://gitlab.2iopenservice.com/opentalent/app_nuxt3/badges/master/coverage.svg)](http://gitlab.2iopenservice.com/opentalent/app_nuxt3/-/commits/master) | | develop | [![pipeline status](http://gitlab.2iopenservice.com/opentalent/app/badges/develop/pipeline.svg)](http://gitlab.2iopenservice.com/opentalent/app/-/commits/develop) | [![coverage report](http://gitlab.2iopenservice.com/opentalent/app_nuxt3/badges/develop/coverage.svg)](http://gitlab.2iopenservice.com/opentalent/app_nuxt3/-/commits/develop) | Frontend Opentalent, avec NuxtJs 3 A voir : - [vuejs.org](https://vuejs.org/guide/introduction.html) : Vue est le framework de base de l'application - [nuxtjs.org](https://nuxt.com/docs/getting-started/introduction) : Nuxt est une surcouche à Vue qui automatise et simplifie beaucoup de choses - [pinia.vuejs.org](https://pinia.vuejs.org/introduction.html) : Store library that allow you to share a state accross your components / pages - [pinia-orm.codedredd.de](https://pinia-orm.codedredd.de/guide/getting-started/quick-start) : Ajoute une gestion par modèles / repos au store Pinia - [vuetifyjs.com](https://cdn.vuetifyjs.com/docs/images/logos/vuetify-logo-v3-slim-text-light.svg) : Composants graphiques préconstruits - [typescriptlang.org](https://www.typescriptlang.org/) : Typescript - [jestjs.io](https://jestjs.io/docs/getting-started) : Tests unitaires pour JS - [cypress.io](https://docs.cypress.io/guides/getting-started/installing-cypress) : 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 ### Activer / désactiver le mode maintenance Pour activer le mode maintenance en production : # (éditer les dates et heures de la maintenance, ligne 75) nano /var/opentalent/git/app/public/maintenance.html # activer la maintenance touch /var/opentalent/git/app/.maintenance Pour le désactiver : rm /var/opentalent/git/app/.maintenance > Les Ips internes sont exclues du mode maintenance ## 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 ### Exécuter ESLint yarn lint ### 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...) |