[MUSIC]
Maintenant que vous avez Node.js sur votre ordinateur,
vous voulez évidemment commencer immédiatement à l'utiliser.
Donc, dans cet exercice, nous allons commencer à utiliser Node.
Nous allons mettre en place un fichier packagé, ou adjacent, pour
notre dossier de test Git avec lequel nous avons travaillé jusqu'à présent.
Ensuite, nous allons configurer un module de noeud appelé comme serveur lite qui
servira le contenu de notre dossier get test.
Et puis nous pouvons parcourir ce fichier index.html et
d'autres fichiers dans un navigateur.
Et nous verrons également comment le serveur lite nous permettra de
voir automatiquement les mises à jour de notre fenêtre de navigateur lorsque nous apportons des modifications à notre
fichier index.html, ou à tout autre fichier dans notre dossier get test.
Le serveur Lite est quelque chose que nous allons largement utiliser dans ce
cours et à venir, pour être en mesure de 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 installer ?
Donc, ici, j'ai quelques informations
du site npmjs.org
qui spécifie exactement quel est le rôle du fichier package.json.
Donc, le fichier package.json sert de documentation sur ce dont
dépendent tous les autres paquets dont votre projet.
Ainsi, par exemple, lorsque vous configurez le serveur lite de votre projet,
cela sera enregistré dans le fichier package.json.
Et 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 votre projet dépend.
Donc, même si le paquet dont vous dépendrez change à l'avenir,
vous pouvez insister pour que l'utilisateur installe uniquement une
version spécifique du package pour une utilisation dans votre application de nœud.
Et aussi, cela rend vos builds reproductibles,
ce qui signifie que lorsque vous partagez votre code avec d'autres,
ils peuvent également faire l'installation de tous les modules de nœuds,
comme nous le verrons plus loin dans cet exercice, sur leur propre ordinateur.
Donc, évidemment, votre prochaine question sera, comment pouvons-nous créer ce fichier package.json ?
Si vous démarrez un nouveau projet dans lequel vous souhaitez 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 permettront de
configurer votre fichier package.json.
Alors continuons avec cela pour notre projet de test Git.
Donc, je suis dans le dossier git-test dans ma fenêtre de terminal.
Assurez-vous que vous ouvrez é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.
Et puis suivez les questions qui sont posées.
Donc, pour le nom du projet, nous allons juste le laisser comme par défaut, git-test.
Pour la version, nous allons simplement le laisser comme 1.0.0.
On pourra éditer ça plus tard.
Pour la description,
il s'agit d'un répertoire
de test pour apprendre Git et Node.
Peu importe, tapez une description là.
Et puis le point d'entrée, je dirais juste index.html.
Habituellement, s'il s'agit d'un paquet de nœuds, le point d'entrée sera index.js.
Maintenant, ce dossier que nous avons configuré est
un dossier basé sur index.html, c'est pourquoi je viens de taper index.html.
Commande de test, rien.
Git, si nous avions déjà configuré le dépôt git dans l'
exercice précédent, il vous demandera automatiquement que pour vous, sinon,
ce serait vide et vous donnera une option pour taper l'URL du référentiel git,
au cas où vous utilisiez un référentiel git en ligne.
Quelques mots clés pour votre projet, que je vais laisser en blanc.
Auteur, tapez votre nom.
Soyons narcissique.
Et la licence.
Et puis, il vous montrera la configuration du fichier package.json au format JSON.
Donc, si votre famille a un JSON, est-ce que cela vous semble très, très familier.
Donc, si tout cela semble bon, disons juste
OK et cela entraîne la création du fichier package.json.
Donc maintenant, si vous listez le contenu du dossier,
vous verrez le fichier package.json dans le contenu du dossier.
Ouvrez ce dossier de test Git dans votre éditeur favori,
puis jetez un oeil au contenu du fichier package.json dans votre éditeur.
Comme étape suivante, nous allons apprendre comment nous pouvons installer un module de noeud
en utilisant NPM, le gestionnaire de paquets de noeuds.
Donc, nous allons installer ce module de nœud appelé comme serveur léger.
Le serveur de lumière diffusera le contenu de ce dossier git-test dans
un serveur qu'il démarre afin que vous puissiez afficher 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 afficher le index.html dans un navigateur.
Alors, installons le serveur de lumière et ensuite nous verrons comment nous pouvons
utiliser le serveur de lumière pour servir le contenu de ce dossier.
C' est très, très utile parce que si vous travaillez sur un
projet de développement web, vous voulez voir où la version en direct de votre projet de développement web.
Ainsi, lorsque vous apportez des modifications à votre projet,
vous pouvez voir les modifications immédiatement reflétées dans le navigateur.
C' est donc un très bon paquet de nœuds qui est très utile à cet effet.
Alors installons ce serveur de lumière.
Pour ce faire, ajoutez l'invite.
Tapez NPM install.
Donc, notez, si vous voulez que NPM installe un paquet de noeud,
c'est ainsi que vous allez l'appeler, puis vous diriez lite-server.
Et puis, nous voulons aussi sauver le fait que notre projet utilise le serveur lite.
Nous allons donc enregistrer ces informations dans le fichier package.json.
Donc, pour ce faire, vous allez taper — save-dev.
Maintenant, l'option save-dev spécifie que ce serveur lite est utilisé pour la
dépendance de développement pour notre projet.
Si vous installez un module de nœud sur lequel votre projet
dépend directement, vous l'installeriez simplement en disant —save option.
Alors, allons-y et installons-le.
Et vous attendez patiemment que l'installation ait lieu.
Cela prendra quelques minutes pour terminer son installation.
Une fois qu'il est 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 le node_module, vous verrez tout un tas
d'autres sous-dossiers, qui contiennent des modules de noeud,
qui sont nécessaires pour les goûts de notre module de noeud et ainsi de suite.
Nous allons donc faire un tour rapide du dossier des modules de noeud pour voir
quel est le contenu de ceux-ci.
Aller à mon dossier git-test, si vous allez dans le dossier des modules de noeud,
vous verrez, comme je l'ai dit, tout un tas de sous-dossiers là-bas.
Normalement, vous n'avez pas besoin de vous aventurer dans le dossier des modules de nœuds.
Ils existent juste là parce qu'ils sont nécessaires pour le [INAUDIBLE].
Donc, lorsque vous naviguez à travers, vous devriez remarquer un dossier nommé lite-server ici.
Lorsque vous allez dans le dossier lite-server,
notez en particulier la présence du fichier index.js,
puis de votre 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 nœud du serveur de lumière, il
installera à son tour de nombreux autres modules de nœud, dont le serveur de lumière lui-même dépend.
C' est donc la raison pour laquelle vous voyez
cette explosion de ces dossiers à l'intérieur des modules de noeud.
Ne vous inquiétez pas trop, la somme des dossiers ne sera pas
supérieure à quelques dizaines de mégaoctets.
Donc, il ne va pas remplir votre répertoire avec du courrier indésirable.
Tout cela est essentiel pour que le nœud puisse vous aider.
Si 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-est hébergé.
Et puis recherchez la documentation pour lite-server.
Je vais vous présenter tout ce que vous devez savoir sur lite-server au fur et à mesure que nous suivrons
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 le site pour en savoir plus sur lite-server.
Le lien est fourni dans vos instructions d'exercice et
des ressources supplémentaires font partie de cette leçon.
Une fois que vous avez terminé cela, puis dirigez-vous vers le.
Editeur où vous avez le dossier, dossier Git-Test, ouvert,
puis afficher le contenu du fichier package.json.
Ainsi, vous verrez que le fichier package.json contient exactement les informations que
vous avez configurées avec votre NPM.
Donc, vous verrez la version du nom et l'auteur du référentiel et
en particulier, notez cette information ici.
Il dit devDependencies, alors il spécifie le lite-sever,
et remarque aussi qu'il dit hat 2.2.2.
Donc, ce qui signifie que ce projet particulier
dépend de lite-server qui est au moins une version 2.2.2 ou supérieure.
C' est donc très utile pour nous.
Pourquoi avons-nous besoin de cette information ici ?
Plus tard, lorsque vous allez aux autres exercices,
vous remarquerez que lorsque vous stockez ceci sur un référentiel en ligne,
vous ne voulez pas stocker tout dans votre dossier de modules de nœuds.
Vous ne stockerez que les informations de tous les fichiers que nous avons créés.
Le dossier des modules de noeud peut toujours être recréé en
tapant NPM install à notre invite de commande.
Ensuite, en fonction des dépendances de développement et
des dépendances répertoriées dans le fichier packager, tous les
modules de noeud dont dépend votre projet seront automatiquement installés.
Nous verrons cela plus tard sur la façon d'utiliser l'
installation de NPM dans ce cours.
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 un de plus ici.
Donc, nous allons dire « commencer ».
Donc start est une commande prise en charge par NPM qui
vous permet de spécifier un tas de choses qui seront démarrées.
Donc plus tard, nous verrons comment nous en faisons usage.
Donc ici, je vais dire « npm run lite ».
Et après ce test, je vais ajouter
une entrée de plus appelée « lite »,
que je vais configurer comme « serveur lite- », ok ?
Avec ces modifications, sauvegardons le fichier package.json.
Et puis, maintenant notre projet est configuré, de sorte que maintenant si vous démarrez le serveur lite-,
le contenu de votre dossier sera maintenant servi dans votre navigateur favori.
En revenant à notre invite de commande, ajoutez l'invite.
Si je tape, npm start, maintenant vous voyez pourquoi j'ai mis cette
carte d'entrée dans mon fichier package.json.
Si je dis npm start, quel que soit le début est configuré comme dans le fichier package.json,
nous spécifions que npm run light, et le lite a été spécifié comme serveur lite.
Donc essentiellement, nous disons Démarrer le serveur lite-server.
Donc, une fois que je tape npm start, il démarrera le lite-server, 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 en spécifiant le que vous êtes en tant que localhost:3000.
Ce sont les paramètres par défaut pour le serveur lite-server.
En outre, cela devrait ouvrir automatiquement
la fenêtre du navigateur de votre navigateur par défaut, et
afficher le contenu de l'index ou du HTML dans la fenêtre du navigateur.
Ici vous pouvez voir que j'ai ouvert mon éditeur et
ma fenêtre de navigateur dirigée vers localhost:3000
simultanément côte à côte, afin que nous puissions voir
comment la fenêtre du navigateur reflétera immédiatement les
modifications que nous apporterons à notre dossier de test Git.
Alors laissez-moi aller à index.html.
Et puis, pour l'espace, je vais retourner ça.
Et puis, donc ici, vous pouvez voir que c'est le contenu de ceci.
Et puis, maintenant, permettez-moi d'ajouter un paragraphe de plus.
Et enregistrez les modifications, puis vous remarquerez immédiatement que
le changement que j'ai fait à mon fichier index.html est reflété dans mon navigateur.
Cela fournit une très belle façon de pouvoir observer en
temps réel les modifications que vous apportez à votre code étant reflétées dans votre navigateur.
Donc, lorsque vous travaillez sur un projet, il sera très approprié
que vous puissiez voir les changements immédiatement.
Ainsi, lorsque vous effectuez une modification et que vous enregistrez le fichier,
le code modifié est immédiatement chargé dans votre navigateur.
Ainsi, vous pouvez immédiatement voir le changement se reflétant dans la fenêtre de votre navigateur.
C' est un outil très utile pendant que vous faites le développement de votre projet.
C' est la raison pour laquelle je vous ai présenté ce serveur lite-server, et l'
ai mis en place pour que nous puissions l'utiliser, au fur et à mesure 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.
Donc, 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à reflété dans notre référentiel Git en ligne
que nous avons mis en place dans l'exercice précédent, soit chez 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,
puis assurez-vous qu'ils ne sont pas synchronisés avec votre référentiel en ligne.
Maintenant, comme je l'ai dit, le dossier node_modules peut toujours être recréé
en tapant npm install à l'invite.
C' est pourquoi, lorsque vous téléchargez
le contenu de votre dossier dans un référentiel Git en ligne,
ou lorsque vous effectuez un commit du dossier dans votre référentiel Git,
vous ne voulez pas que le dossier node_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 dans notre éditeur.
Donc, dans l'éditeur, dans le dossier git-test,
je vais créer un nouveau fichier et je vais le nommer .gitignore.
Notez que le nom commence par un point
, puis le reste du nom est g-i-t-i-g-n-o-r-e.
C' est donc très important que vous configurez le fichier avec exactement ce nom,
.gitignore.
Nous allons donc créer ce fichier appelé .gitignore, et
la première ligne de ce fichier, nous taperons comme node_modules.
Donc, ce que cela signifie, c'est que le dossier node_modules va être
exclu de notre commit git.
Donc, une fois que j'ai créé ce fichier .gitignore et
ensuite ajouté node_modules 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 état 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 référentiel en ligne.
Donc, pour faire ce git push -u
origin master et attendre
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 à partir du test Git, vous verrez que
lorsque je regarde la source, vous verrez que le fichier package.json a été ajouté.
Le fichier .gitignore a été ajouté et le nouveau fichier index.html a été archivé.
Donc, cela complète cet exercice.
Donc, dans cet exercice,
nous avons appris à configurer un fichier package.json en utilisant npm init.
Nous avons appris à installer un module npm.
Et nous avons appris à utiliser le module npm lite-server pour servir
le contenu de notre dossier de projet afin qu'il puisse être consulté dans un navigateur.
Donc, c'est une bonne façon de diffuser votre contenu web, votre
application web ou votre site Web, afin
que vous puissiez voir les changements en temps réel se reflétant dans la fenêtre de votre navigateur.
Et puis nous avons aussi vu comment nous pouvons configurer le .gitignore afin que certains
dossiers puissent être exclus d'être archivés dans notre dépôt Git.
Ceci complète cet exercice.
Donc, avec cela, je suis sûr que vous avez obtenu une bonne gestion sur
l'utilisation de Git, puis aussi des modules de noeud et de noeud.
Ne vous inquiétez pas, nous allons utiliser le nœud de manière intensive, de différentes manières, au
fur et à mesure que vous passerez par les cours de cette spécialisation.
Ce n'est qu'un début.
[ MUSIQUE]