1. Premiers pas

1.4 Le premier projet, pas à pas

Un parcours complet en dix minutes : créer un projet, le démarrer, le voir dans le navigateur et l'ouvrir dans l'éditeur.

Dans l'application: «Nouveau projet»

En bref

  • Un exemple complet : un petit site en TypeScript avec Vite, de la création au navigateur.
  • Il suffit du composant Node.js, que le kit installe tout seul s'il manque, et d'une connexion à Internet.
  • À la fin, vous saurez créer un projet, le démarrer, l'ouvrir dans le navigateur et le modifier dans l'éditeur.

1. Créez le projet

  1. Ouvrez la page « Projets » depuis la barre d'activité.
  2. Dans le « Panneau rapide », sous « Nouveau projet », dans le bloc « Web », cliquez sur « Vite » (sous « Web avec JavaScript et TypeScript »). L'onglet « Nouveau projet » s'ouvre.
  3. Dans « 1. Base », la carte « Vite » (« Site ou application web en TypeScript ») est déjà choisie.
  4. Dans « 2. Ajouts », rien n'est nécessaire pour cet essai.
  5. Dans « 3. Nom », tapez primo-sito. Le nom devient le dossier projects\primo-sito.
  6. Regardez le « Récapitulatif » : vous verrez que le kit utilisera Node.js, exécutera npm create vite dans le dossier projects puis npm install dans le projet, et enregistrera les actions « Démarrer » et « Build ».
  7. Appuyez sur « Créer le projet ». Dans la partie « Progression », les commandes et leur sortie défilent.
  8. Quand « Projet primo-sito créé. » apparaît, appuyez sur « Ouvrir le projet ».

2. Démarrez-le et ouvrez-le dans le navigateur

  1. La page du projet s'ouvre sur la section « Lancement ». En bas, la liste « Actions » montre ce que le projet sait faire : les actions reconnues à partir du fichier package.json (npm run dev, npm run build, npm install) et celles de la recette (Démarrer, Build).
  2. Appuyez sur ▶ à côté de « npm run dev ». C'est une action web : le kit lui attribue un port, la démarre et attend qu'elle réponde. L'état passe de « démarrage » à « en écoute ».
  3. Appuyez sur « Ouvrir dans le navigateur » : le site d'exemple de Vite s'ouvre à l'adresse http://localhost:<port>/, où le port est un nombre entre 7100 et 7999 choisi par le kit et conservé à chaque démarrage.
  4. Vous voulez que le grand bouton « Démarrer » en haut démarre toujours cette action ? Sélectionnez-la et appuyez sur l'étoile « Par défaut ».

3. Modifiez-le dans l'éditeur

  1. Appuyez sur « Éditeur » en haut de la page du projet. Le kit démarre l'éditeur (la première fois, cela peut prendre quelques secondes) et ouvre une fenêtre d'Atollo avec le dossier du projet.
  2. Ouvrez src/main.ts, changez un texte et enregistrez avec Ctrl+S.
  3. Revenez au navigateur : Vite met la page à jour tout seul.
  4. Pour arrêter le site, revenez sur Atollo et appuyez sur « Arrêter » (ou ■ à côté de l'action). Fermer Atollo arrête de toute façon tout.

Et maintenant ?