Création d'un projet

configurer un projet par défaut

Commencez par créer un projet projet frontEnd avec la commande :

npm create vite@latest

Donnez un nom au projet, puis choisir les options vanilla puis javascript.

Plusieurs fichiers ont été créés dans le répertoire protant le nom de votre porjet :

• index.html la page principale (qui utilisera le js dans src)
• package.json il y aura toutes les dépendances du projet (les packages qu'on va ajouter). Normalement il devrait ressembler à ça.

{
  "name": "test",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "vite": "^6.3.0"
  }
}

On y retrouve les informations relatives au projet et les dépendances à installer la première fois que vous voulez faire tourner le code.

• public/ pour les ressources types images ou vidéo ou archives à télécharger par votre utilisateur quand le site sera en ligne
• src/ le source js de votre projet.

Ajout d'un package à votre projet

On va ajouter un package au projet. Faites :

npm install dayjs

c'est un (petit) package qui permet de gérer les dates facilement en js.

Cette commande télécharge du code depuis un dépot officiel. Regardez de nouveau le package.json une ligne a été ajoutée

 "dependencies": {
    "dayjs": "^1.11.13"
  }

et le code de ce package est téléchargé dans votre réperotire node_modules

important

Il ne faut JAMAIS ajouter le répertoire node_modules dans un dépot git. La bonne façon de faire c'est de

• cloner le dépot
• faire npm install pour télécharger les dépendances
• faire npm run dev
• modifier le code et sauvegarder. La page est rendue automatiquement via le live reload. Pas besoin d'actualiser.

Faites npm install pour installer toutes les dépendances qui ne sont pas encore isntallées.

Faites maintenant npm run dev pour lancer le serveur local qui interprétera votre code js et réaliser le rendu de la page index.html

Vous devriez voir un exemple avec un compteur qu'on peut modifier.

important

Pour le moment ne regardez pas le code !

Modifiez votre projet

On va installer et utiliser un module de gestion de date dans le code.

Dans main.js, ajoutez juste avant la ligne document.querySelector('#app').innerHTML =

//importation du code qui est dans node_modules
import dayjs from 'dayjs';
//utilisation des méthodes du package
const now = dayjs();
const formattedDate = now.format('YYYY-MM-DD HH:mm');
//affichage dans la console.
console.log(`La date du jour est  : ${formattedDate}`);

avant la dernière balise <div> ajoutez la ligne

<p>Nous sommes le : ${formattedDate}</p>

Désormais la page HTML affiche également la date du jour. Dans la console vous pouvez également visualiser l'affichage du console.log

important

Pour la réalisation des tutoriels vous avez le choix. Vous pouvez utiliser un projet créé par vite comme dans ce tutoriel. Dans le premier tutoriel sur les boucles je vous montre comment faire.

Sinon vous le souhaitez vous pouvez ne pas utiliser vite dans un premier temps, comme dans le tutoriel précédent et tout gérer tout à la main. Mais pour le projet il faudra utiliser vite