[MUSIC]
Ora che hai Node.js sul tuo computer,
ovviamente vuoi iniziare immediatamente a usarlo.
Quindi, in questo esercizio, inizieremo a usare Node.
Imposteremo un file confezionato, o adiacente, per
la nostra cartella di test Git con cui abbiamo lavorato finora.
Poi, ci sarà impostare un modulo nodo chiamato come server lite che
servirà il contenuto della nostra cartella get test.
E poi possiamo sfogliare questo file index.html e
altri file in un browser.
E vedremo anche come il server lite ci permetterà di
vedere automaticamente gli aggiornamenti alla nostra finestra del browser come facciamo modifiche al nostro
file index.html, o qualsiasi altro file nella nostra cartella get test.
Il server lite è qualcosa che useremo ampiamente in questo e in
corsi futuri, per essere in grado di vedere i cambiamenti in tempo reale
in una finestra del browser mentre modifichi i file del tuo progetto.
Come ho detto, vogliamo impostare il file package.json.
Quindi, cos'è esattamente questo file package.json che stiamo andando a configurare?
Quindi qui, ho alcune informazioni
dal sito npmjs.org
che specifica qual è esattamente il ruolo del file package.json.
Quindi il file package.json serve come documentazione su ciò che tutti gli
altri pacchetti da cui dipende il tuo progetto.
Quindi, ad esempio, quando imposti il server lite del tuo progetto,
questo verrà registrato nel file package.json.
E in modo che, successivamente, si può anche fare uso di quel pacchetto in futuro.
Inoltre, consente di specificare da quale versione specifica di un pacchetto
dipende il progetto.
Quindi, anche se il pacchetto che si dipende da modifiche in futuro,
è possibile insistere sul fatto che si desidera che l'utente
installi solo una versione specifica del pacchetto da utilizzare all'interno dell'applicazione nodo.
Inoltre, rende le tue build riproducibili, il
che significa che quando condividi il tuo codice con gli altri,
allora possono anche fare l'installazione di tutti i moduli del nodo,
come vedremo più avanti in questo esercizio, sul proprio computer.
Quindi, ovviamente, la tua prossima domanda sarà, come creiamo questo file package.json?
Se si avvia un nuovo progetto in cui si desidera inizializzare il
file package.json, digitare semplicemente npm init al prompt nella cartella del progetto.
E poi questo ti porterà attraverso una serie di passaggi che ti permetteranno di
configurare il tuo file package.json.
Quindi procediamo con quello per il nostro progetto di test Git.
Quindi eccomi qui nella cartella git-test nella mia finestra del terminale.
Assicurati di aprire anche una finestra di terminale o una finestra di comando e
quindi vai alla cartella git-test.
E al prompt, digita npm init.
E poi segui le domande che vengono poste.
Quindi, per il nome del progetto, lo lasceremo come predefinito, git-test.
Per la versione, lo lasceremo come 1.0.0.
Possiamo modificarlo più tardi.
Per descrizione,
questa è una directory di test
per imparare Git e Node.
Non importa, digita qualche descrizione lì.
E poi il punto di ingresso, direi solo index.html.
Di solito se si tratta di un pacchetto nodo, il punto di ingresso sarà index.js.
Ora questa cartella che abbiamo installato è
una cartella basata su index.html, quindi è per questo che ho appena digitato index.html.
Comando di prova, niente.
Git repository, se avessimo già configurato il repository git nell'
esercizio precedente, ti chiederà automaticamente che, in caso contrario,
questo sarebbe vuoto e ti darà un'opzione per digitare l'URL del repository git,
nel caso in cui tu stia usando un repository git online.
Alcune parole chiave per il tuo progetto, che lascerò vuoto.
Autore, digita il tuo nome.
Cerchiamo di essere narcisisti.
E la patente.
E poi, ti mostrerà la configurazione del file package.json in formato JSON.
Quindi, se la tua famiglia ha un JSON, ti sembra molto, molto familiare.
Quindi, se questo sembra tutto buono, diciamo solo OK e
poi ciò si traduce nella creazione del file package.json.
Quindi ora se elenchi il contenuto della cartella,
vedresti il file package.json nel contenuto della cartella.
Apri quella cartella di test Git nel tuo editor preferito,
quindi dai un'occhiata al contenuto del file package.json nel tuo editor.
Come passo successivo, impareremo come possiamo installare un modulo nodo
utilizzando NPM, il Node Package Manager.
Quindi, abbiamo intenzione di installare questo modulo nodo chiamato come server luce.
Il light server servirà il contenuto di questa cartella git-test in
un server che si avvia in modo da poter visualizzare il contenuto in un browser.
Dato che abbiamo un file index.html,
se serviamo questa cartella, allora sarà un sito web.
E puoi visualizzare index.html in un browser.
Quindi, impostiamo il server di luce e poi vedremo come possiamo fare
uso del server di luce per servire il contenuto di questa cartella.
Questo è molto, molto utile perché se stai lavorando a un
progetto di sviluppo web, vuoi vedere dove versione live del tuo progetto di sviluppo web.
In modo che, mentre apporti modifiche al tuo progetto,
puoi vedere le modifiche immediatamente riflesse nel browser.
Quindi questo è un ottimo pacchetto nodo che è molto utile per questo scopo.
Quindi impostiamo questo server di luce.
Per fare ciò, aggiungi il prompt.
Digitare nell'installazione di NPM.
Quindi nota, se vuoi che NPM installi un pacchetto nodo,
questo è il modo in cui lo invocherai e poi diresti lite-server.
E poi, vogliamo anche salvare il fatto che il nostro progetto sta usando il server lite.
Quindi salveremo queste informazioni nel file package.json.
Quindi, per farlo, si sta andando a digitare - save-dev.
Ora l'opzione save-dev specifica che questo server lite viene utilizzato per la
dipendenza di sviluppo per il nostro progetto.
Se stai installando un modulo nodo da cui
dipende direttamente il tuo progetto, allora lo installeresti semplicemente dicendo l'opzione —save.
Quindi, andiamo avanti e installarlo.
E aspetti pazientemente che l'installazione avvenga.
Ci vorranno pochi minuti per completare l'installazione.
Una volta installato, si
noterà immediatamente quando si guarda il contenuto della cartella,
si noterà immediatamente che c'è una cartella lì creata denominata node_modules.
Ora, se vai nel node_module, vedrai un sacco
di altre sottocartelle lì dentro, che contengono moduli nodo,
che sono necessari per persone come il nostro modulo nodo e così via.
Quindi facciamo un rapido tour della cartella dei moduli nodo per vedere
quali sono i contenuti di questi.
Andando alla mia cartella git-test, se stai andando alla cartella dei moduli del nodo,
vedresti, come ho detto, un sacco di sottocartelle lì.
Normalmente non è necessario avventurarsi nella cartella dei moduli del nodo.
Esistono solo lì perché sono necessari per il [INUDIBILE].
Quindi, mentre navighi, dovresti notare una cartella denominata lite-server qui.
Quando si entra nella cartella lite-server,
notare in particolare la presenza del file index.js e
quindi il file package.json e molte altre cose.
Quindi questo contenuto della cartella comprende il modulo nodo lite-server.
Ma questo modulo nodo lite-server dipende da altri moduli nodo
per fornire alcune funzionalità aggiuntive.
Quindi questo è il motivo quando si installa il modulo nodo del server leggero, a sua volta
installerà molti altri moduli nodo, da cui dipende il server di luce stesso.
Quindi questo è il motivo per cui si vede che l'esplosione di
queste cartelle all'interno dei moduli nodo.
Non essere troppo preoccupato per questo, la somma totale delle cartelle non sarà
più di poche decine di megabyte.
Quindi non riempirà la tua directory di spazzatura.
Questo è tutto essenziale per il nodo per essere in grado di aiutarti.
Nel caso in cui tu sia curioso di conoscere il lite-server e come funziona e così via,
puoi sempre andare giù a questo sito GitHub in cui è ospitato il lite-server.
E poi cercare la documentazione per lite-server. Vi
presenterò tutto ciò che avete bisogno di sapere su lite-server mentre passiamo attraverso
questo corso e i corsi rimanenti.
Quindi non c'è bisogno di preoccuparsi troppo, ma nel caso in cui siete curiosi,
si può sempre andare sul sito per saperne di più su lite-server.
Il link è fornito nelle istruzioni per l'allenamento e
risorse aggiuntive fanno parte di questa lezione.
Una volta completato questo, quindi dirigersi verso il.
Editor in cui si ha la cartella, la cartella Git-Test, aperta e
quindi visualizzare il contenuto del file package.json.
Quindi vedresti che il file package.json contiene esattamente le informazioni
configurate con il tuo NPM.
Quindi vedresti la versione del nome e l'autore del repository e,
in particolare, nota queste informazioni qui.
Dice devDependencies, quindi specifica il lite-sever,
e nota anche che dice hat 2.2.2.
Quindi il che significa che questo particolare progetto
dipende da lite-server che è almeno una versione 2.2.2 o superiore.
Quindi questo è molto utile per noi.
Ora perché abbiamo bisogno di queste informazioni qui?
Più tardi, quando vai agli altri esercizi,
noterai che quando lo memorizzi in un repository online,
non vuoi archiviare tutto nella cartella dei moduli del nodo.
Memorizzerai solo le informazioni di tutti i file che abbiamo creato.
La cartella dei moduli nodo può sempre essere ricreata
digitando NPM install al prompt dei comandi.
E poi in base alle dipendenze di sviluppo e
alle dipendenze elencate nel file packager, tutti i
moduli nodo da cui dipende il progetto verranno installati automaticamente.
Vedremo che più avanti su come utilizzare
NPM installare in questo corso.
Ora che siamo al file package.json facciamo un paio di modifiche in modo
che saremo in grado di fare uso del lite-server per servire quel contenuto.
Quindi proprio qui, in questa opzione chiamata script,
aggiungiamo un altro qui.
Quindi diremo «start».
Quindi start è un comando supportato da NPM che
consente di specificare un sacco di cose che verranno avviate.
Quindi più tardi vedremo come ci avvaliamo di questo.
Quindi qui ho intenzione di dire «npm run lite».
E dopo quel test, aggiungerò
un'altra voce chiamata «lite»,
che configurerò come «lite-server», ok?
Con queste modifiche, salviamo il file package.json.
E poi, ora il nostro progetto è configurato, in modo che ora se avvii il lite- server,
il contenuto della tua cartella sarà ora servito nel tuo browser preferito.
Tornando al nostro prompt dei comandi, aggiungere il prompt.
Se digito, npm start, ora vedi perché ho inserito quella
scheda di ingresso nel mio file Package.json.
Se dico npm start, qualunque sia l'avvio sia configurato come nel file Package.json,
specifichiamo che npm run light e lite è stata specificata come server lite.
Quindi, in sostanza, stiamo dicendo Avviare il lite-server.
Quindi, una volta digitato npm start, avvierà il lite-server e
servirà il contenuto di questa cartella.
Ora come si accede al contenuto di questa cartella?
Se vuoi accedere a questo localmente,
accederai specificando che sei come localhost: 3000.
Queste sono le impostazioni predefinite per il lite-server.
Inoltre, questo dovrebbe aprire automaticamente
la finestra del browser del browser predefinito e
mostrare il contenuto di indice o HTML nella finestra del browser.
Qui puoi vedere che ho aperto il mio editor e la
mia finestra del browser diretto a localhost: 3000
contemporaneamente fianco a fianco, in modo che possiamo vedere
come la finestra del browser rifletterà immediatamente
eventuali modifiche che apportiamo alla nostra cartella di test Git.
Quindi lasciami andare a index.html.
E poi, per il bene dello spazio, lo consegnero'.
E poi, qui, potete vedere che questo è il contenuto di questo.
E poi, ora, mi permetta di aggiungere un altro paragrafo.
E salva le modifiche, e poi noterai immediatamente che
la modifica che ho apportato al mio file index.html si riflette nel mio browser.
Questo fornisce un modo molto bello di essere in grado di osservare in
tempo reale le modifiche che apporti al tuo codice che vengono riflesse nel tuo browser.
Quindi, quando si sta lavorando su un progetto, sarà molto appropriato per
voi essere in grado di vedere le modifiche immediatamente.
Quindi, quando apporti una modifica e poi salvi il file,
il codice modificato viene immediatamente caricato nel tuo browser.
Quindi puoi vedere immediatamente il cambiamento che si riflette nella finestra del tuo browser.
Questo è uno strumento molto utile mentre stai facendo lo sviluppo del tuo progetto.
Questo è il motivo per cui ti ho presentato a quel lite-server, e
l'ho impostato in modo che possiamo farne uso, mentre sviluppiamo il sito web in questo corso.
Se ricordi, avevamo già impostato la nostra cartella git-test per essere un repository Git.
Così controllando di nuovo,
Vedremo che abbiamo già tre commit nel nostro repository Git.
E questo repository Git è già mirroring sul nostro repository Git online
che abbiamo impostato nell'esercizio precedente sia su Bitbucket o GitHub.
La mia cartella git-test viene sincronizzata con il mio
repository Bitbucket in questo particolare esercizio.
Quindi quello che ho intenzione di fare ora è mostrarti come è possibile escludere alcune
cartelle dalla cartella del progetto
e quindi assicurarmi che non siano sincronizzate con il tuo repository online.
Ora, come ho detto, la cartella node_modules può sempre essere
ricreata digitando npm install al prompt.
Ecco perché quando carichi
il contenuto della tua cartella in un repository Git online,
o quando fai un commit della cartella nel tuo repository Git,
non vuoi che la cartella node_modules o tutte le sottocartelle sotto di esso siano
incluse nel commit.
Quindi, come escludiamo alcune cartelle o
alcuni file dalla nostra cartella dall'essere archiviati nel nostro repository Git?
Quindi, per farlo, imposteremo un file chiamato .gitignore.
Quindi questo è il nome del file, .gitignore.
Quindi, per creare questo file.gitignore, andremo al nostro editor.
Quindi nell'editor, nella cartella git-test,
creerò un nuovo file e lo chiamerò .gitignore.
Si noti che il nome inizia con un punto e
poi, il resto del nome è g-i-t-i-g-n-o-r-e.
Quindi questo è molto importante impostare il file con esattamente quel nome,
.gitignore.
Quindi creiamo questo file chiamato .gitignore, e
la prima riga di quel file, scriveremo come node_modules.
Quindi ciò significa che la cartella node_modules verrà
esclusa dal nostro commit git.
Quindi, una volta creato quel file.gitignore e
poi aggiungo node_modules nel file.gitignore, salviamo le modifiche.
E poi ora faremo un commit dello stato attuale del nostro progetto
nel nostro repository Git.
Spero che tu ricordi i tuoi comandi git.
Facciamo uno stato git, e poi quando lo fai,
noterai immediatamente che hai il
file index.html contrassegnato come modificato, e poi i due nuovi file, .gitignore e package.json.
Quindi, facciamo un git add., e poi facciamo uno stato git.
E poi vedi che tutti questi nuovi file sono stati archiviati nel tuo commit.
Facciamo un git commit. git commit -m «quarto commit».
E i file sono impegnati.
Proponiamo il nuovo commit al nostro repository online.
Quindi, per fare questo git push -u
origin master e attendere
che venga spinto sul nostro server.
Ora, se vai al tuo repository Git online,
vedrai che il file package.json e
.gitignore sarebbero stati archiviati nel tuo repository Git.
Andando al mio repository Bitbucket dal test Git, vedrai che
quando guardo la fonte, vedrai che il file package.json è stato aggiunto.
Il file.gitignore è stato aggiunto e il nuovo file index.html è stato archiviato.
Quindi questo completa questo esercizio.
Quindi, in questo esercizio,
abbiamo imparato come impostare un file package.json usando npm init.
Abbiamo imparato come installare un modulo npm.
E abbiamo imparato come usare il modulo lite-server npm per servire
il contenuto della nostra cartella di progetto in modo che possa essere visualizzato in un browser.
Quindi, questo è un bel modo di servire i tuoi contenuti web, la
tua applicazione web o il tuo sito web, in modo
che tu possa vedere le modifiche in tempo reale che vengono riflesse nella finestra del tuo browser.
E poi abbiamo anche visto come possiamo configurare il.gitignore in modo che alcune
cartelle possano essere escluse dal check-in nel nostro repository Git.
Questo completa questo esercizio.
Quindi con questo, sono sicuro che hai ottenuto una buona gestione
sull'uso di entrambi Git, e quindi anche dei moduli nodo e nodo.
Non preoccuparti, useremo il nodo ampiamente, in vari modi,
mentre passerai attraverso i corsi di questa specializzazione.
Questo è solo un inizio.
[ MUSIC]