Skip to content
Snippets Groups Projects
Select Git revision
  • master default protected
1 result
Blame Permalink
Forked from an inaccessible project.
A-preparatifs.md 4.82 KiB

A. Préparatifs

Sommaire

A.1. Récupération du projet

Ce repo contient une solution commentée du précédent TP.
Il va vous servir de base pour ce nouveau TP.

  1. Commencez par faire un fork du TP :

    Choisissez de placer le fork dans votre profil utilisateur et configurez le repo en mode "privé" (Settings > Visibility, project features, permissions > Project visibility)

  2. Ajoutez-votre encadrant de TP en tant que "reporter" pour qu'il ait accès à votre code :

    • dans le menu de gauche, cliquez sur "Membres",
    • entrez comme nom d'utilisateur celui de votre encadrant de TP (@nicolas.anquetil, @patricia.everaere-caillier ou @thomas.fritsch)
    • ... et "reporter" comme rôle.

  3. Ouvrez ensuite un terminal et récupérez les fichiers de ce TP grâce à Git en clonant votre fork dans un dossier de votre choix :

    mkdir ~/tps-js
git clone https://gitlab.univ-lille.fr/<votre-username>/tp3.git ~/tps-js/tp3

    NB : Comme pour le TP1, ici je clone dans mon dossier /home/thomas/tps-js/tp3. Si vous êtes sous windows faites attention au sens des slashs et au caractère "~" qui représente le dossier de l'utilisateur sur système unix. Si vous êtes sous windows utilisez Git bash (qui comprend cette syntaxe) ou si vous tenez vraiment à utiliser cmd pensez à adapter !

    NB2 : Comme pour le TP1 aussi, si vous préférez cloner en SSH pour ne pas avoir à taper votre mot de passe à chaque fois, renseignez votre clé SSH dans votre compte utilisateur gitlab et clonez à partir de cette URL : git@gitlab-ssh.univ-lille.fr:js/tp3.git

  4. Ouvrez le projet dans VSCodium (pour les différentes façon d'ouvrir le projet relisez les instructions du TP1 )

    codium ~/tps-js/tp3

  5. Installez les paquets npm nécessaires au projet notamment le compilateur Babel.
    Ouvrez un terminal intégré à VSCodium (CTRL+J (PC) / CMD+J (Mac)) et tapez juste :

    npm install

    NB : Vous noterez qu'on ne précise pas les paquets à installer. npm va en effet les déterminer automatiquement à partir du contenu du fichier package.json et plus particulièrement à partir des sections "dependencies" et "devDependencies" qui indiquent quels sont les paquets qui ont été installés précédemment.

    Magique ! :raised_hands:

A.3. Lancement de l'application

Comme dans le précédent TP lancez un serveur HTTP et la compilation du projet dans deux terminaux côte à côte (terminaux splittés) :

  1. Lancez un serveur http dans un terminal intégré de VSCodium (CTRL+J (PC) / CMD+J (Mac)) :

    npx serve -l 8000

  2. Lancez la compilation de votre projet dans un deuxième terminal splitté (le watch et npx serve doivent tourner en parallèle) :

    npm run watch

    NB : vous vous souvenez ? npm run permet de lancer un script custom que vous avez créé dans le précédent TP (TP2 / A.5. Créer un script de build personnalisé) puis modifié pour compiler avec webpack+babel

  3. Vérifiez dans le navigateur que la page index.html s'affiche correctement en ouvrant l'url http://localhost:8000.

    Le résultat attendu est le suivant :

    NB : Si la page ne s'affiche pas correctement, vérifiez que vous avez bien lancé le serveur http dans le dossier du projet, c'est à dire celui où se trouve le fichier index.html. Puis vérifiez dans la Console ou dans l'onglet Sources (Chrome) ou Debugger (Firefox) qu'l n'y a pas d'erreur JS lorsque la page se charge.

Étape suivante

Si la compilation fonctionne, vous pouvez passer à l'étape suivante : B. Les bases de l'API DOM