Développement local de votre projet

Dans cet article

Le développement local consiste à configurer et exécuter votre projet sur votre propre ordinateur plutôt que dans le cloud ou sur un serveur distant. Lorsque vous développez localement, vous pouvez travailler sur votre code sans connexion Internet et faire des essais sans affecter l’application en production.

Les étapes nécessaires à la configuration d’un environnement de développement local varient selon les projets, en fonction des langages de programmation, des infrastructures, des dépendances et des outils utilisés. Dans ce guide, vous apprendrez les compétences fondamentales nécessaires pour mettre en place n’importe quel projet en travaillant sur un exemple d’application côté client basée sur HTML, CSS et JavaScript. Vous pourrez ensuite appliquer ces mêmes compétences à d’autres projets à l’avenir.

Avant de commencer, vous devez installer certains outils essentiels couramment utilisés pour le développement local.

  1. Définissez VS Code avec Copilot.
  2. Installer Git.

Tout d’abord, faites une copie du référentiel sur votre ordinateur en le clonant.

  1. Commencez par cloner le référentiel new2code/client-side-web-application. Ce lien ouvre une boîte de dialogue dans VS Code pour cloner le référentiel.
  2. Choisissez un emplacement pour enregistrer le référentiel sur votre ordinateur, puis cliquez sur Sélectionner comme destination du référentiel.
  3. Lorsque vous y êtes invité, ouvrez le référentiel.

  1. Ouvrez Copilot Chat, puis demandez-lui d’identifier les éléments à installer à l’aide de le prompt suivant.

    Text
    What do I need to install to develop this project locally?

    Dans cet exemple, Copilot indiquera que ce projet a besoin de Node.js. Node.js vous permet d’exécuter du code JavaScript sur votre ordinateur et fournit des outils pour le développement web.

  2. Demandez à Copilot comment installer les éléments requis pour le projet, puis suivez les étapes pour les installer sur votre ordinateur.

    Pour cet exemple, nous pourrions demander « Comment installer Node.js ? » Copilot vous fournira des instructions pour visiter https://nodejs.org/ et télécharger le programme d’installation.

Maintenant que vous avez installé les logiciels requis, vous devez comprendre comment les utiliser pour ce projet spécifique.

Vérifiez d’abord le fichier LISEZMOI. La plupart des projets incluent un fichier LISEZMOI dans le répertoire racine qui explique comment configurer et exécuter le projet. Pour ce projet, le fichier LISEZMOI et la requête Copilot vous indiquent que l’étape suivante consiste à installer les dépendances du projet à l’aide de npm, le gestionnaire de package Node.js.

  1. Ouvrez la Palette de commandes en appuyant sur Ctrl+Maj+P (Windows/Linux) ou Cmd+Maj+P (Mac).

  2. Tapez Terminal: Create New Terminal, puis appuyez sur Entrée.

  3. Dans l’onglet terminal, collez la commande suivante.

    Bash
    npm install

Ce projet utilisant Node.js, nous avons utilisé npm install pour lire le fichier package.json et télécharger toutes les dépendances nécessaires au bon fonctionnement du projet. D’autres types de projets utiliseront des commandes différentes. Par exemple, les projets Python peuvent utiliser pip install -r requirements.txt, et les projets Ruby peuvent utiliser bundle install.

Si le fichier LISEZMOI ne contient pas d’informations sur l’installation des dépendances, vous pouvez :

  • Rechercher les fichiers de configuration : différents projets utilisent différents fichiers pour répertorier leurs dépendances. Par exemple, les projets Node.js utilisent package.json, les projets Python utilisent requirements.txt et les projets Ruby utilisent Gemfile.
  • Demander à Copilot  : essayez un prompt tel que « Maintenant que Node.js est installé, en quoi consiste la prochaine étape pour configurer ce projet ? »

Maintenant que votre environnement de développement est configuré, vous pouvez démarrer le serveur de développement et l’utiliser pour prévisualiser les modifications apportées à votre code.

  1. Découvrez comment démarrer le projet en consultant le fichier LISEZMOI dans le dossier de votre projet.

    Dans cet exemple, la section « Étapes pour l’exécution locale » du fichier LISEZMOI explique que vous pouvez démarrer le serveur de développement à l’aide de la commande npm start. Entrez la commande suivante dans votre terminal.

    Bash
    npm start

  2. Pour savoir où se trouve le serveur local, consultez la sortie du terminal. Vous verrez que le serveur local est disponible sur http://localhost:8080. Accédez à cette adresse dans votre navigateur.

  3. Apportez une petite modification au code, par exemple en modifiant du texte dans le fichier HTML ou en changeant une couleur dans le fichier CSS. Enregistrez les changements apportés.

  4. Consultez la documentation du projet ou la sortie du terminal pour comprendre comment voir vos modifications. Certains projets s’actualisent automatiquement après avoir enregistré les modifications, tandis que d’autres nécessitent l’actualisation de la fenêtre de votre navigateur.

    Pour ce projet, actualisez la fenêtre de votre navigateur pour voir vos modifications.

Si le fichier LISEZMOI ne contient pas les informations dont vous avez besoin, consultez les fichiers de configuration pour connaître les commandes disponibles. Vous pouvez également interroger Copilot Chat à l'aide du prompt suivant.

Text
How do I start this project locally?

Maintenant que vous avez correctement configuré votre premier environnement de développement local, il est temps d’appliquer ces compétences à différents types de projets.

Entraînez-vous avec un autre projet : essayez de configurer un autre projet avec des exigences différentes. Par exemple, l’application web Python de @new2code utilise Python et Flask au lieu de Node.js.

Appliquez ce que vous avez appris dans ce tutoriel pour :

  • Clonez le référentiel à l’aide de VS Code
  • Demandez à Copilot quels outils et dépendances vous devez installer
  • Lisez le fichier LISEZMOI pour comprendre comment exécuter le projet
  • Lancez l’application dans votre navigateur

Cette pratique vous aidera à reconnaître les modèles communs à différentes technologies et à renforcer votre confiance dans votre capacité à configurer n’importe quel projet en local.