Le code de démonstration repose sur des paquets non standards. C'est pourquoi l'archive disponible ci-dessous inclut toute l'arborescence du projet, excepté le répertoire node_modules.
Pour les plus curieux qui veulent voir comment est conçu le back-end, une section à la fin de cet article vous permet de le télécharger et vous donne les indications pour l'installer et le configurer sur votre propre machine.
Le code du front-end peut être téléchargé ci-dessous:
Une fois l'archive décompactée, un répertoire authdemo est créé.
Aller dans ce répertoire, et exécuter : npm install
Une fois l'installation terminée : npm run serve
Le serveur de développement est en HTTPS, donc il faut utiliser https://localhost:8080 dans le navigateur. Lors du premier accès, cela produit une erreur car le navigateur ne reconnaît pas le certificat du serveur de développement. Il faut donc lui "forcer la main" et accepter le certificat.
Pour que le front-end puisse accéder au back-end, il faut lui donner l'URL d'accès.
En général, lors du développement, on utilise un back-end également de développement, qui n'est pas forcément celui de production.
Pour faciliter le passage de version de développement vers production, il est possible de créer à la racine du projet front-end 2 fichiers définissant des variables : .env.development et .env.production
Par exemple, le fichier .env.development de l'archive contient :
VUE_APP_API_ENDPOINT=https://localhost:3334/authapi
La variable VUE_APP_API_ENDPOINT permet de donner l'URL du back-end. On met donc une valeur pour la version de développement et on met une autre URL dans le fichier .env.production pour la version de production.
En effet, si on lance un serveur de dev. pour le front-end (avec npm run serve), c'est le contenu de .env.development qui est utilisé. Et si on lance la création de la version de production (avec npm run build), c'est le contenu de .env.production qui est utilisé.
Ces variables peuvent être manipulées dans le code du front-end avec process.env.nom_variable. (cf. config.js dans l'archive)