[MUSIC]
Maintenant que vous avez Node.js sur votre ordinateur,
vous voulez évidemment commencer à l'utiliser immédiatement.
Donc, dans cet exercice, nous allons commencer à utiliser Node.
Nous allons mettre en place un fichier package.json pour
notre dossier git-test avec lequel nous avons travaillé jusqu'à présent,
puis nous allons mettre en place un module Node appelé lite-server que
servira le contenu de notre dossier git-test.
Et puis nous pouvons parcourir ce fichier index.html et
d'autres fichiers dans un navigateur.
Et nous verrons aussi comment le serveur lite-server nous permettra de voir automatiquement les mises à jour de notre navigateur
lorsque nous apportons des modifications à notre fichier index.html ou
tous les autres fichiers dans notre dossier git-test.
Le serveur lite-server est quelque chose que nous allons utiliser largement dans ce cours et
futurs pour pouvoir voir les changements en temps réel dans
une fenêtre de navigateur lorsque vous modifiez les fichiers de votre projet.
Comme je l'ai mentionné, nous voulons configurer le fichier package.json.
Alors, quel est exactement ce fichier package.json que nous allons mettre en place ?
Donc ici, j'ai quelques informations de
le site npmjs.org qui spécifie quel
est exactement le rôle du fichier package.json.
Donc, le fichier package.json sert de documentation
sur ce que tous les autres paquets dont votre projet dépend.
Ainsi, par exemple, lorsque vous configurez le serveur lite-server pour
votre projet, celui-ci sera enregistré dans le fichier package.json.
Pour que par la suite, vous puissiez également utiliser ce paquet à l'avenir.
En outre, il vous permet de spécifier la version spécifique d'un paquet
dont dépend votre projet.
Donc, même si le paquet dont vous dépendrez des changements à l'avenir,
, vous pouvez insister pour que l'utilisateur n'installe qu'une version
spécifique du paquet pour l'utiliser dans votre application Node.
Et aussi cela rend vos builds reproductibles,
ce qui signifie que lorsque vous partagez votre code avec d'autres,
alors ils peuvent également faire l'installation de tous les modules Node,
comme nous le verrons plus tard dans cet exercice, sur leur propre ordinateur.
Donc évidemment, votre prochaine question serait, comment pouvons-nous créer ce fichier package.json ?
Si vous démarrez un nouveau projet, où vous voulez initialiser le fichier package.json
, tapez simplement npm init à l'invite dans le dossier du projet.
Et puis cela vous mènera à travers un ensemble d'étapes
qui vous permettra de configurer votre fichier package.json.
Alors continuons avec cela pour notre projet git-test.
Alors me voici dans le dossier git-test dans ma fenêtre de terminal.
Assurez-vous d'ouvrir également une fenêtre de terminal ou
une fenêtre de commande, puis allez dans le dossier git-test.
Et à l'invite, tapez npm init, puis suivez les questions qui sont posées.
Donc, pour le nom du projet, nous allons juste le laisser par défaut, git-test.
Pour la version, nous allons juste le laisser comme 1.0.0.
Nous pouvons modifier cela plus tard.
Pour description,
Ceci est un répertoire de test
pour apprendre Git et Node.
Peu importe, tapez une description là.
Et puis le point d'entrée, je dirai juste index.html.
Habituellement, s'il s'agit d'un paquet Node, le point d'entrée serait index.js.
Maintenant, ce dossier que nous avons mis en place est un dossier index.html,
donc c'est pourquoi je tape simplement index.html.
Test commande, rien.
Dépôt Git, Si nous avions déjà configuré le dépôt Git dans l'exercice
précédent, il vous demandera automatiquement cela.
Sinon, ce serait vide et vous donnerait une option pour taper l'URL du dépôt Git
au cas où vous utiliseriez un dépôt Git en ligne.
Quelques mots-clés pour votre projet, que je vais laisser vides.
Auteur, tapez votre nom.
Soyons narcissiques.
Et licence.
Et puis il vous montrera la configuration du fichier package.json au format JSON.
Donc, si vous êtes familier avec JSON, cela vous semblera très, très familier.
Donc, si tout ça a l'air bien, disons juste d'accord.
Et puis cela entraîne la création des fichiers package.json.
Donc maintenant si vous listez le contenu du dossier,
vous verrez le fichier package.json dans le contenu du dossier.
Ouvrez le dossier git-test dans votre éditeur préféré et
puis jetez un oeil au contenu du fichier package.json dans votre éditeur.
Comme prochaine étape, nous allons apprendre comment installer
un module Node à l'aide de NPM, le gestionnaire de paquets de nœuds.
Nous allons donc installer ce module de noeud appelé lite-server.
Le serveur lite-server servira le contenu de ce dossier git-test dans
un serveur qu'il démarre, afin que vous puissiez voir le contenu dans un navigateur.
Étant donné que nous avons un fichier index.html, si nous servons ce dossier
alors ce sera un site Web et vous pouvez voir l'index.html dans un navigateur.
Alors configurons le serveur lite-server et nous verrons comment utiliser
le serveur lite-server pour servir le contenu de ce dossier.
Ceci est très, très utile parce que si vous travaillez sur un projet de développement web,
vous voulez voir la version en direct de votre projet de développement web afin
que lorsque vous apportez des modifications à votre projet,
vous pouvez voir les changements immédiatement reflétés dans le navigateur.
C'est donc un très bon paquet Node qui est très utile à cet effet.
Alors mettons en place le serveur lite-server.
Pour ce faire à l'invite, tapez npm install.
Donc, notez, si vous voulez que npm installe un paquet Node,
voici comment vous allez l'appeler.
Et puis tu dirais lite-server.
Et puis nous voulons aussi sauver le fait que notre projet utilise le serveur lite-server.
Nous allons donc enregistrer ces informations dans le fichier package.json.
Donc, pour ce faire, nous allons taper —save-dev.
Maintenant, l'option save-dev spécifie que ce serveur lite-server est utilisé pour la dépendance de développement
pour notre projet.
Si vous installez un module Node dont votre projet dépend directement
, vous l'installerez simplement en disant —save option.
Alors allons-y et installons-le.
Et vous attendez patiemment que l'installation ait lieu.
Il faudra quelques minutes pour que cela termine son installation.
Une fois installé, alors vous remarquerez immédiatement
lorsque vous regardez le contenu de votre dossier,
vous remarquerez immédiatement qu'il y a un dossier créé nommé node_modules.
Maintenant, si vous allez dans les node_modules, vous verrez tout un tas
d'autres sous-dossiers qui contiennent des modules de noeud qui
sont nécessaires pour le module de noeud lite-sever et ainsi de suite.
Alors, faisons un tour rapide du dossier node_modules pour voir
quel est le contenu de ceux-ci.
En allant dans mon dossier git-test, si vous allez dans le dossier node_modules,
vous verrez comme je l'ai dit, tout un tas de sous-dossiers là-bas.
Normalement, vous n'avez pas besoin d'être rendu dans le dossier node_modules,
ils existent juste là parce qu'ils sont nécessaires pour le serveur lite-server.
Donc, lorsque vous naviguez à travers vous, si un dossier de notification nommé lite-server ici.
Lorsque vous allez dans le dossier lite-server, notez en particulier la présence de
le fichier index.js, puis un fichier package.json, et plusieurs autres choses.
Donc ce contenu du dossier comprend le module de nœud lite-server.
Mais ce module de noeud lite-server dépend d'autres modules de noeud
pour lui fournir des fonctionnalités supplémentaires.
C'est donc la raison pour laquelle, lorsque vous installez le module de noeud lite-server, il va à son tour
installer de nombreux autres modules de noeuds dont le lite-server lui-même dépend.
Donc c'est la raison pour laquelle vous voyez cette explosion de
ces dossiers dans le dossier node_modules.
Ne vous inquiétez pas trop, la somme totale de tout cela ne sera pas supérieure à
quelques dizaines de mégaoctets.
Donc, il ne va pas remplir votre répertoire avec cette ordure.
Tout ceci est essentiel pour que le nœud puisse vous aider.
Au cas où vous êtes curieux de connaître le serveur lite-server et comment il fonctionne et ainsi de suite.
Vous pouvez toujours descendre sur ce site GitHub où le serveur lite-server est posté et
puis rechercher la documentation pour lite-server.
Je vais vous présenter tout ce que vous devez savoir sur lite-server alors que nous passons par
ce cours et les cours restants.
Donc, vous n'avez pas besoin de vous inquiéter trop à ce sujet.
Mais juste au cas où vous êtes curieux,
vous pouvez toujours aller sur ce site pour en savoir plus sur lite-server.
Le lien est fourni dans vos instructions d'exercice et
ressources supplémentaires partie de cette leçon.
Une fois que vous avez terminé cela, dirigez-vous vers l'éditeur,
où vous avez le dossier, le dossier git-test, ouvert et
puis affichez le contenu du fichier package.json.
Donc, vous verrez que le fichier package.json contient exactement les informations que
vous avez configurées avec votre npm.
Donc, vous verrez le nom, la version et l'auteur du référentiel,
et en particulier, notez cette information ici dit DevDependencies.
Et puis il spécifie lite-server, et remarque également qu'il dit, ^2.2.2.
Donc, ce qui signifie que ce projet particulier dépend de
lite-server qui est une version au moins 2.2.2.
Tous haut niveau.
C'est donc très utile pour nous.
Maintenant, pourquoi avons-nous besoin de cette information ici, plus tard lorsque vous allez aux autres exercices
, vous remarquerez que lorsque vous les stockez dans un dépôt en ligne.
Vous ne voulez pas tout stocker dans votre dossier node_modules.
Nous ne stockerons que les informations de tous les fichiers que nous avons créés.
Le dossier node_modules peut toujours être recréé par
en tapant nmp install à notre invite de commande.
Et puis basé sur les dépendances DevDependencies et
répertoriées dans le fichier package.json.
Tous les modules de noeuds dont dépend votre projet seront automatiquement installés
.
Nous verrons que plus tard,
sur la façon d'utiliser npm install dans ce cours.
Maintenant, maintenant que nous sommes au fichier package.json, faisons quelques modifications afin
que nous puissions utiliser le serveur lite-server pour servir ce contenu.
Donc, ici dans cette option appelée scripts,
ajoutons en un de plus ici.
Donc, nous dirons, commencez.
Donc start est une commande que npm supporte
qui vous permet de spécifier un tas de choses qui seront démarrées.
Donc, plus tard, nous verrons comment nous en ferons usage.
Donc ici, je vais dire, npm run lite.
Et après le test, je vais
pour ajouter une entrée de plus appelée,
lite que je vais configurer en tant que serveur lite-server.
Ok, avec ces changements, sauvegardons le fichier package.json et
maintenant, notre projet est configuré.
Alors que maintenant, si vous démarrez le serveur lite-server,
le contenu de votre dossier sera maintenant servi dans votre navigateur préféré.
Retour à notre invite de commande et à l'invite.
Si je tape npm start, maintenant vous voyez pourquoi
j'ai mis cette entrée appelée start dans mon fichier package.json.
Donc, si je dis npm start, quel que soit ce démarrage configuré comme,
dans le fichier package.json.
Nous spécifions que npm run lite, puis lite a été spécifié comme lite-server.
Donc essentiellement, nous disons démarrer le serveur lite-server.
Donc une fois que j'ai tapé, npm start, il démarrera le serveur lite-et
il servira le contenu de ce dossier.
Maintenant, comment accéder au contenu de ce dossier ?
Si vous voulez y accéder localement, vous y accéderez par
en spécifiant l'URL comme localhost:3000.
Il s'agit des paramètres par défaut pour le serveur lite-server.
De plus, cela devrait ouvrir automatiquement
la fenêtre du navigateur de votre navigateur par défaut et
puis afficher le contenu de index.html dans cette fenêtre de navigateur.
Ici, vous pouvez voir que j'ai ouvert mon éditeur et
ma fenêtre de navigateur dirigée à localhost:3000
simultanément côte à côte.
Pour que nous puissions voir comment la fenêtre du navigateur reflétera immédiatement toutes les modifications que nous apportons à nos fichiers dans le dossier git-test.
Alors laissez-moi passer à index.html.
Et puis, pour l'espace, je vais retourner ça.
Et alors ici, vous pouvez voir que c'est le contenu de ceci.
Et maintenant, permettez-moi d'ajouter dans
un paragraphe de plus,
et de sauvegarder les changements.
Et puis vous remarquerez immédiatement que la modification que
j'ai apportée à mon fichier index.html est reflétée dans mon navigateur.
Ceci offre une très belle façon d'observer, en temps réel,
les changements que vous apportez à votre code reflétant dans votre navigateur.
Donc, lorsque vous travaillez sur un projet, il serait très approprié que
vous puissiez voir les changements immédiatement.
Donc, lorsque vous effectuez une modification et enregistrez le fichier,
le code modifié est immédiatement chargé dans votre navigateur afin
vous pouvez immédiatement voir le changement reflété dans la fenêtre de votre navigateur.
C'est un outil très utile pendant le développement de votre projet.
C'est la raison pour laquelle je vous ai présenté le serveur lite et
l'a mis en place afin que nous puissions l'utiliser pendant que nous développons le site web dans ce cours.
Si vous vous souvenez, nous avions déjà configuré notre dossier git-test pour être un dépôt git,
de sorte que, en vérifiant à nouveau, nous
verrons que nous avons déjà trois commits dans notre dépôt git.
Et ce dépôt git est déjà dans notre dépôt git en ligne,
que nous avons mis en place dans l'exercice précédent, soit sur bitbucket ou GitHub.
Mon dossier git-test est synchronisé avec mon dépôt bitbucket
dans cet exercice particulier.
Donc ce que je vais faire maintenant est de vous montrer comment vous pouvez exclure certains dossiers
de votre dossier de projet et
puis assurez-vous qu'ils ne sont pas synchronisés avec votre dépôt en ligne.
Maintenant, comme je l'ai dit, le dossier des modules de noeud peut toujours être recréé
en tapant npminstall à l'invite.
C'est pourquoi, lorsque vous téléchargez le contenu de
votre dossier dans un dépôt git en ligne ou
lorsque vous faites un commit du dossier dans votre dépôt git,
vous ne voulez pas que le dossier note modules ou tous les sous-dossiers
sous celui-ci soient inclus dans le, Commit.
Alors, comment exclure certains dossiers ou
certains fichiers de notre dossier d'être archivés dans notre dépôt git.
Donc, pour ce faire, nous allons mettre en place un fichier nommé .gitignore.
C'est donc le nom du fichier, .gitignore.
Donc, pour créer ce fichier .gitignore, nous irons à notre éditeur.
Donc, dans l'éditeur dans le dossier de test git, je vais créer un nouveau fichier.
Et je vais le nommer .gitignore.
Notez que le nom commence par un point et
puis le reste du nom est G-I-T-I-G-N-O-R-E.
Donc c'est très,
très important que vous ayez mis en place la fille avec exactement le nom, .gitignore.
Alors créons ce fichier appelé .gitignore, et
la première ligne de ce fichier, nous allons taper comme node_modules.
Donc ce que cela signifie, c'est que
le dossier du module de noeud va être exclu de notre commit git.
Donc, une fois que j'ai créé ce fichier .gitignore et
puis ajouté des modules de noeud dans le fichier .gitignore, sauvegardons les modifications.
Et puis nous allons maintenant faire un commit de l'état actuel de notre projet
dans notre dépôt git.
J'espère que vous vous souvenez de vos commandes git.
Faisons un état git, et quand vous le faites,
vous remarquerez immédiatement que vous avez le fichier index.html
marqué comme modifié, puis les deux nouveaux fichiers, .gitignore et package.json.
Donc, nous faisons un git add., puis faisons un statut git.
Et puis vous voyez que tous ces nouveaux fichiers ont été archivés dans votre commit.
Faisons un commit git, git commit -m « quatrième
commit ». Et les fichiers sont validés.
Poussons le nouveau commit dans notre dépôt en ligne.
Donc, pour ce faire, git push
-u origine master.
Et attendez qu'il soit poussé sur notre serveur.
Maintenant, si vous allez dans votre dépôt git en ligne,
, vous verrez que le fichier package.json et
.gitignore auraient été archivés dans votre dépôt git.
Aller à mon dépôt bitbucket pour le git-test.
Vous verrez que quand je regarde la source,
vous verrez que le fichier package.json a été ajouté,
le .gitignore a été ajouté, et le nouveau fichier index.html a été enregistré.
Donc cela complète cet exercice.
Donc, dans cet exercice,
, nous avons appris à configurer un fichier package.json en utilisant npm minute.
Nous avons appris à installer un module npm.
Et nous avons appris à utiliser le module npm du serveur lite pour servir
le contenu de notre dossier de projet afin qu'il puisse être consulté dans un navigateur.
C'est donc une belle façon de servir vos contenus,
votre application web ou votre site web si
que vous pouvez voir les changements en temps réel reflétés dans la fenêtre de votre navigateur.
Et puis, nous avons également vu comment ils peuvent configurer le .gitignore afin que certains dossiers
puissent être exclus de l'archivage dans notre dépôt git.
Ceci termine cet exercice.
Donc, avec cela, je suis sûr que vous auriez obtenu un bon handle sur
l'utilisation des deux modules git, puis aussi des modules de noeud et de noeud.
Ne vous inquiétez pas.
Nous allons utiliser le noeud largement de diverses manières
au fur et à mesure que vous passez par les cours de cette spécialisation.
Ce n'est qu'un début.
[MUSIQUE]