Ciao a tutti e benvenuti in questa guida dove vi mostro come si possono servire file statici come file CSS e JavaScript con un server Express.
Se non siete interessati alla spiegazione della guida ecco il codice per servire un file statico con express.js
// App.js
var express = require('express');
var path = require('path');
var app = express();
app.use('/static', express.static(path.join(__dirname, 'public')))
app.get('/', function(req,res){
res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000, function(){
console.log('App sta ascolatando su localhost:3000');
});
Se siete completamente nuovi al mondo di Node.js ed Express, vi consiglio di dare un’occhiata a questa guida su come creare la vostra prima web app con express.js.
Cominciamo con la guida!
Partiamo con un server Express base.
// App.js var express = require('express'); var path = require('path'); var app = express(); app.get('/', function(req,res){res.sendFile(path.join(__dirname + '/index.html')); }); app.listen(3000, function(){console.log('App sta ascolatando su localhost:3000'); });
Con un file index.html salvato nella stessa directory dello script, se eseguiamo questo codice con Node, vedremo il contenuto del file index.html servito all’indirizzo localhost:3000.
Ora se proviamo a collegare un file CSS al file HTML utilizzando solamente un tag di link, vedremo che il server risponderà con un error 404, dato che non abbiamo specificato al server Express come trovare i file statici.
Per fare questo abbiamo bisogno di utilizzare il middleware express.static
in modo più specifico abbiamo bisogno del seguente comando:
app.use('/static', express.static(path.join(__dirname, 'public')))
Prima di eseguire il nuovo script, creiamo una cartella chiamata public, che come dice la parola sarà accessibile al pubblico. Inseriamo il nostro file CSS all’interno di questa directory.
Con il comando JS appena visto facciamo due cose:
- Utilizziamo il middleware express.static per specificare la cartella aperta al pubblico.
- Aggiungiamo un prefisso /static a tutti i file all’interno di questa directory: Questo farà in modo che i nostri file saranno accessibili all’indirizzo localhost:3000/static/
All’interno del file HTML andiamo ad aggiungere il prefisso /static al path del file CSS.
Notate che non c’è bisogno di aggiungere la directory /public al path.
<link rel="stylesheet" type="text/css" href="/static/style.css">
Ora se salviamo il tutto e andiamo a eseguire il server possiamo vedere che il file CSS è stato collegato in modo corretto. Lo stesso processo può essere fatto per servire file JavaScript o qualsiasi file statico.
Ci siamo ora avete visto come sia possibile collegare un file statico come file CSS o JS tramite un server Express.
Grazie per aver seguito questa guida, se avete qualche problema o domanda commentate e vi risponderò immediatamente :)
