‫Docente: Impariamo
‫ora come servire file statici con Express.
‫Ora cosa intendo in realtà con i file statici?
‫Bene, sono i file che si trovano nel nostro file system a
‫cui attualmente non possiamo accedere utilizzando tutte le rotte.
‫Quindi, per esempio, abbiamo questa panoramica. html qui
‫nella nostra cartella pubblica.
‫Ma in questo momento non c'è modo di accedervi
‫utilizzando un browser, giusto?
‫E lo stesso per questi file di immagine che
‫abbiamo qui, oi file CSS o Javascript.
‫Quindi lascia che te lo mostri
‫e questa volta lasciami usare il browser.
‫Per ora copio questo URL qui
‫solo per mostrarvi
‫che funzionerà, ovviamente anche nel browser.
‫Ok, questo è il nostro risultato non formattato qui,
‫dallo stesso percorso.
‫Ma diciamo che in realtà vogliamo accedere a quel file
‫HTML di cui stavo parlando.
‫Quindi possiamo, ovviamente, non solo
‫scrivere pubblico e quindi, ad esempio,
‫una panoramica. html, giusto?
‫Non c'è modo di accedervi adesso.
‫Ed è semplicemente perché non abbiamo definito alcun
‫percorso per questo URL, giusto?
‫Non abbiamo alcun gestore associato a questa rotta.
‫Quindi, se vogliamo effettivamente accedere a
‫qualcosa dal nostro file
‫system, dobbiamo utilizzare un middleware Express integrato.
‫Quindi lascia che ora ti mostri come possiamo farlo.
‫Ad esempio, dopo questo.
‫Ora in questa sezione in realtà stiamo parlando solo di un'API, quindi
‫non abbiamo effettivamente bisogno di servire file statici
‫come immagini o HTML, quindi quello che ti ho appena mostrato.
‫Ma poiché questa sezione
‫è un'introduzione a
‫Express in generale, volevo comunque mostrarti rapidamente questo contenuto.
‫Quindi, come stavo dicendo, tutto ciò che dobbiamo
‫fare è usare un semplice middleware integrato che
‫funzioni in questo modo.
‫Express dot static, perché vogliamo servire file statici, quindi questo è
‫un nome ovvio per questo.
‫E così qui passiamo la directory da
‫cui vogliamo servire i file statici.
‫E in questo caso, userò la directory pubblica.
‫Quindi questa cartella qui dove abbiamo questi file HTML, ok?
‫E in realtà usiamo una
‫stringa modello qui in modo che io possa andare avanti e
‫usare la variabile dirname, quindi slash e public.
‫Salvalo e torna al browser.
‫Quindi saremo in grado di aprire questa panoramica. html.
‫Ora non funzionerà in questo URL qui.
‫In realtà deve essere così.
‫Quindi senza il pubblico, solo /overview. html.
‫Quindi vediamo, e funziona davvero.
‫Va bene.
‫Ora, perché è così?
‫Perché non abbiamo bisogno della cartella pubblica qui nell'URL?
‫Bene, semplicemente perché quando apriamo un URL che non
‫riesce a trovare in nessuno
‫dei nostri percorsi, cercherà in quella cartella pubblica che abbiamo definito.
‫E imposta quella cartella alla radice.
‫Ok, facciamo finta che la radice sia ora
‫la nostra cartella pubblica.
‫Quindi questo qui, e poi la panoramica è lì.
‫Ed è per questo che abbiamo fatto l'accesso ad esso.
‫Quindi lì dentro abbiamo anche delle immagini, per esempio.
‫Diciamo che vogliamo aprire l'immagine e poi questo pin qui.
‫E possiamo farlo.
‫Quindi
‫immagine, pin png e quindi eccoci qui.
‫Ecco l'immagine.
‫Quello che non possiamo fare è questo, perché questo non è un file.
‫Sembra un percorso normale, quindi Express
‫cerca effettivamente di trovare un gestore di percorso per questo,
‫cosa che non può perché
‫non hai definito nulla.
‫Va bene?
‫Quindi funziona davvero solo per i file statici.
‫In tal caso, di nuovo, non andrà in una nuova rotta,
‫ma servirà semplicemente quel file che abbiamo
‫specificato dalla cartella
‫pubblica o nella cartella che abbiamo specificato qui in questo middleware.
‫Ora dai un'occhiata alla console qui e vedi tutte le richieste che
‫sono state effettivamente fatte quando abbiamo aperto quella pagina.
‫Ora chiariamo questo qui solo così vediamo tutte le richieste che
‫in realtà provengono da quella pagina di panoramica.
‫Quindi scriviamo di nuovo panoramica. html qui.
‫E queste immagini qui
‫sono rotte e questo perché questo HTML non dovrebbe essere
‫servito in questo modo, va bene?
‫Lo sto usando solo ora
‫qui in modo da ottenere un feedback visivo.
‫Non sono affatto interessato al contenuto qui.
‫Ora dai un'occhiata a tutte le richieste che sono
‫state fatte per tutte le risorse.
‫Quindi, come ho detto
‫all'inizio, per ogni pezzo che fa parte del sito
‫Web, il nostro server riceve effettivamente una richiesta separata.
‫E qui vedi che la maggior parte di loro ottiene questo 404.
‫Ecco perché i collegamenti vengono interrotti nella pagina Web, semplicemente perché
‫Express non può trovarli in questa cartella.
‫Ma ancora una volta, non è questo il punto.
‫Quello che volevo solo
‫mostrarti è come possiamo servire
‫file statici da una cartella e non da un percorso.
‫Va bene.
‫E così questo conclude l'introduzione di base a Express.
‫Nei prossimi due
‫video parleremo di qualcosa chiamato variabili
‫d'ambiente e imposteremo anche ESlint in codice VS orale.