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épendances

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/

Dev dépendance

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. Installer le projet avec:

• npm install ilog-spa

2. Choisir une configuration

• npx spa-reset pour une configuration minimale
• npx spa-hello-world pour affichier hello world
• npx spa-show-example pour illustrer ce dont est capable notre framework

2. Build le projet avec:

• npx spa-build

3. Ouvrir http://localhost:3000 dans un navigateur de web

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. Si vous souhaitez tester une des configurations pré-définies, vous pouvez utiliser une des commandes suivantes :

• npx spa-hello-world
• npx spa-show-example

Voir la liste des configurations pré-définies pour plus d'informtions.