{"meta":{"title":"Développement local de votre projet","intro":"Découvrez comment créer un environnement de développement local en travaillant sur un exemple d’application côté client basée sur HTML, CSS et JavaScript.","product":"Bien démarrer","breadcrumbs":[{"href":"/fr/get-started","title":"Bien démarrer"},{"href":"/fr/get-started/learning-to-code","title":"Apprendre à coder"},{"href":"/fr/get-started/learning-to-code/developing-your-project-locally","title":"Développement local"}],"documentType":"article"},"body":"# Développement local de votre projet\n\nDécouvrez comment créer un environnement de développement local en travaillant sur un exemple d’application côté client basée sur HTML, CSS et JavaScript.\n\n## Vue d’ensemble\n\nLe 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.\n\nLes é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.\n\n## Installation des outils de développement essentiels\n\nAvant de commencer, vous devez installer certains outils essentiels couramment utilisés pour le développement local.\n\n1. [Définissez VS Code avec GitHub Copilot](https://code.visualstudio.com/docs/copilot/setup-simplified).\n1. [Installez Git](https://git-scm.com/downloads).\n\n## Cloner et ouvrir le référentiel dans VS Code\n\nTout d’abord, faites une copie du référentiel sur votre ordinateur en le clonant.\n\n1. [Commencez par cloner le référentiel new2code/client-side-web-application](vscode://vscode.git/clone?url=https://github.com/new2code/client-side-web-application). Ce lien ouvre une boîte de dialogue dans VS Code pour cloner le référentiel. <!-- markdownlint-disable-line GHD003 -->\n1. Choisissez un emplacement pour enregistrer le référentiel sur votre ordinateur, puis cliquez sur **Sélectionner comme destination du référentiel**.\n1. Lorsque vous y êtes invité, ouvrez le référentiel.\n\n## Installation des spécifications du projet\n\n1.               [Ouvrez Copilot Chat](vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=text), puis demandez-lui d’identifier ce que vous devez installer avec le prompt suivant. <!-- markdownlint-disable-line GHD003 -->\n\n    ```text copy\n    What do I need to install to develop this project locally? \n    ```\n\n    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.\n\n1. Demandez à Copilot comment installer les éléments requis pour le projet, puis suivez les étapes pour les installer sur votre ordinateur.\n\n    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.\n\n## Installer les dépendances du projet\n\nMaintenant que vous avez installé les logiciels requis, vous devez comprendre comment les utiliser pour ce projet spécifique.\n\n**Vérifiez d’abord le fichier LISEZ-MOI**. 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.\n\n1. Ouvrez la palette de commandes en appuyant sur <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Windows /Linux) ou <kbd>Cmd</kbd>+<kbd>Shift</kbd>+<kbd>P</kbd> (Mac).\n\n1. Tapez `Terminal: Create New Terminal`, puis appuyez sur <kbd>Entrée</kbd>.\n\n1. Dans l’onglet terminal, collez la commande suivante.\n\n   ```bash copy\n   npm install\n   ```\n\nCe 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, Python projets peuvent utiliser `pip install -r requirements.txt`, et les projets Ruby peuvent utiliser `bundle install`.\n\nSi le fichier LISEZMOI ne contient pas d’informations sur l’installation des dépendances, vous pouvez :\n\n* Rechercher les fichiers de configuration : différents projets utilisent des fichiers différents 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`.\n* **Demander à Copilot**  : essayez un prompt tel que « Maintenant que Node.js est installé, en quoi consiste la prochaine étape pour configurer ce projet ? »\n\n## Exécution et développement de votre projet\n\nMaintenant 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.\n\n1. Découvrez comment démarrer le projet en consultant le fichier LISEZMOI dans le dossier de votre projet.\n\n   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.\n\n   ```bash copy\n   npm start\n   ```\n\n1. 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.\n1. 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.\n1. 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.\n\n   Pour ce projet, actualisez la fenêtre de votre navigateur pour voir vos modifications.\n\nSi 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 demander à [Copilot Chat](vscode://GitHub.Copilot-Chat?ref_product=copilot&ref_type=engagement&ref_style=text) avec le prompt suivant. <!-- markdownlint-disable-line GHD003 -->\n\n```text copy\nHow do I start this project locally?\n```\n\n## Quelle est l’étape suivante ?\n\nMaintenant 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.\n\n**Entraînez-vous avec un autre projet** : essayez de configurer un autre projet avec des exigences différentes. Par exemple, [@new2code'application web Python](https://github.com/new2code/python-web-application) utilise Python et Flask au lieu de Node.js. <!-- markdownlint-disable-line GHD003 -->\n\nAppliquez ce que vous avez appris dans ce tutoriel pour :\n\n* Clonez le référentiel à l’aide de VS Code\n* Demandez à Copilot quels outils et dépendances vous devez installer\n* Lire le fichier LISEZ-MOI pour comprendre comment exécuter le projet\n* Lancez l’application dans votre navigateur\n\nCette 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."}