Ilog-express-typescript NPM

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

Cahier des charges 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

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
Si vous souhaitez tester une configuration pré-définie, vous pouvez utiliser les commandes: