ILOG 2022 - Projet 2 : Single App Application (SPA)

Cahier des charges du projet

Voir la spécification du projet

Fonctionnement du projet

Voir comment construire des pages et le routeur associé

Dépendences

Pour fonctionner, notre projet nécessite Node.js Pour l'installer, visitez https://nodejs.org/en/download/. La commande node -v vous permet de vérifier votre installation. La version utilisée lors du développement est v18.10.0.

Serveur express

Pour faire fonctionner notre framework SPA, nous avons besoin d'un serveur pour être en mesure de rediriger toutes les routes vers une seule page HTML. Express est un framework gratuit, léger et open-source qui propose une approche minimaliste. Pour en apprendre plus, rendez-vous sur: https://expressjs.com/

Bundle browserify

Lorsque nous transpilons notre code typescript, la gestion des imports/exports est traduite en Object.defineProperty(exports, "__esModule", { value: true }); Cependant nos navigateurs n'ont pas la propriété global exports de défini.

Nous avions pensé supprimer les imports/exports de nos fichiers typescript et de concatener l'ensemble de nos fichiers à l'aide de: find ./spa -type f -name '*.ts' -exec cat {} + > mergedfile.ts mais nous perdions l'intérêt d'utiliser typescript.

À la place, nous avons utilisé browserify. Browserify résout le problème d'avoir trop de fichiers JS référencés dans notre HTML, l'incapacité d'utiliser les modules Node dans le navigateur et l'incapacité de référencer nos propres modules dans notre propre code. Grâce à Browserify, nous compactons l'ensemble de nos fichier javascript en un seul, que l'on référence depuis notre page HTML principale. Pour en apprendre plus, rendez-vous sur: https://browserify.org/

Utiliser l'application

Afin d'utiliser l'application :

1. Lancer les commandes

• npm install uniquement la première fois pour initialiser le projet
• npm run build-start pour build le projet et lancer le serveur

2. Ouvrir http://localhost:${port}/ dans un navigateur de web. Par défaut ce sera http://localhost:3000 Si vous souhaitez remettre à zéro le projet à sont état d'originie, utilisez la commande npm run reset
3. Si vous souhaitez tester une configuration pré-définie, vous pouvez utiliser les commandes:

• npm run hello-world
• npm run show-example

Puis exécuter le build et lancer le serveur avec la commande npm run build-start

Explication des commandes

Une liste de commande pré-défini existe pour utiliser l'application. Voir la liste des commandes pour en apprendre plus.

Configurations pré-définies

Une liste de configurations pré-définies existe pour démontrer les fonctionalités de l'application. Voir la liste des configurations pré-définies