O es chicha o es limonada.
Estas mezclando cosas y por eso el resultado no es el esperado.
En esta respuesta se muestra una forma de servir archivos estáticos:
- usando Express
- usando el módulo HTTP de Nodejs.
Express
Express es un potente framework para Node, que te permite crear aplicaciones o API's de forma muy rápida.
Una de sus características principales es que se encarga de manejar las solicitudes y respuestas mediante funciones middleware
.
En tu código (aportado en la pregunta), lo único que hace Express es ocupar memoria del equipo:
const express = require('express');
const app = express();
app.use(express.static('public'));
Y es que luego no utilizas para nada tu aplicación Express, sino por el contrario, levantas tu servidor usando el módulo http
de Node, dejando la aplicación de Express instanciada sin más.
Al punto al que quiero llegar es que cuando levantas un servidor http
con Node, y usas Express, no es necesario importar el módulo http
, ya que Express lo hace internamente.
Un ejemplo muy básico de un servidor usando Express sería:
// importamos los módulos necesarios
const express = require('express');
const path = require('path');
//creamos una instancia de express
const app = express();
// puerto donde queremos que escuche nuestro servidor
const port = 3000;
// función middleware para servir archivos estáticos
app.use(express.static(path.join(__dirname, 'public')));
// levantamos nuestro servidor en el puerto seleccionado
app.listen(port, () => {
console.log(`Servidor iniciado en el puerto: ${port}`);
});
Ahora, cualquier solicitud a http://localhost:3000/archivo.ext
debería funcionar, siempre que archivo.ext
exista en la carpeta public
.
¿path, __dirname? ¿me lo explicas por favor?
El módulo path
de NodeJS es una herramienta que nos permite trabajar con archivos y directorios de archivos (path).
El método join()
que estoy usando, me permite unir los segmentos o trozos de rutas válidas a directorios.
Por ejemplo, si en MS Windows, yo uso:
path.join('C:\\folder','subfolder');
el resultado será:
'C:\\folder\\subfolder'
(recordemos que en sistemas Windows, los directorios se delimitan con barra invertida, es por ello que debemos usar el carácter de escape: \
)
La variable de entorno __dirname
, nos proporciona la ruta (path) del archivo que ejecuta el script
de Node. En tu caso, debe indicar el directorio en donde se encuentra tu archivo form.js
(es aconsejable que uses un nombre un poco más acorde, como server.js
, app.js
o incluso index.js
)
Al usar __dirname
me aseguro de apuntar directamente al directorio donde reside mi script, y en ese mismo directorio debe haber un subdirectorio llamado public
, de esta forma, nuestra aplicación Express sabrá cuál es la ruta absoluta de los archivos que debe servir.
Por otro lado, usar __dirname
nos elimina el engorroso tema de escribir la ruta a mano, y así evitamos errores de tipeo.
¿Y las cabeceras?
Resulta que no todo en esta vida es fácil y siempre tendremos algún dolor de cabeza.
En este caso, nuestro quebradero de cabezas son precisamente las cabeceras HTTP. Y es que tanto cliente como servidor deben saber de antemano el tipo de dato que están recibiendo de su contraparte. Express no hace esto por nosotros, pero nos provee de una forma de hacerlo.
Cuando se envía una archivo en cualquier formato desde nuestro servidor, debemos establecer una cabecera de tipo content-type
cuyo valor es uno de los posibles tipo MIME listado por el IANA. Por ejemplo:
- HTML:
text/html
.
- CSS:
text/css
.
- Javascript:
application/javascript
.
- PNG:
image/png
.
En esta respuesta doy una explicación amplia del proceso, entonces, para no ser repetitivo, sólo mostraré cómo ha de quedar el código en cuestión. Para ello usaremos el módulo mime
, que debemos instalar en nuestra aplicación usando: npm install --save mime@latest
.
El código debe verse así:
// importamos el módulo
const mime = require('mime');
// escribimos la función que creará nuestra cabecera
const setHeadersOnStatic = (res, path, stat) => {
const type = mime.getType(path);
res.set('content-type', type);
}
// creamos el objeto con las opciones
const staticOptions = {
setHeaders: setHeadersOnStatic
}
// usamos las opciones
app.use(express.static(path.join(__dirname, 'public'), staticOptions));
Recibir datos del formulario
Por último, en tu código se ve que deseas responder a una solicitud tipo POST
, para ello, puedes usar una función middleware
que se encargue de procesar la solicitud y enviar la respuesta acorde.
Dado que en nuestra carpeta public
ya tenemos un archivo llamado formulario.html
, no necesitamos escribir un middleware
para una solicitud GET
, ya que nuestro servidor ya está configurado para servir dicho archivo si se accede a la ruta:
http://localhost:3000/formulario.html
Pero para recibir los datos de dicho formulario, una vez que el cliente lo complete y haga clic en el botón de submit
, debemos decirle a Express cómo procesar esa solicitud. Para ello, usaremos el método post
:
app.post('/ruta', (req, res, next) => {
const data = req.body;
console.log(data);
res.status(200).json({
mensaje: 'Datos recibidos',
data
});
});
Aquí he usado el campo body
de nuestro objeto request
, sin embargo, para usar dicho campo, el mismo debe primero ser llenado con la información proveniente del cliente. Esto sólo ocurre si analizamos la solicitud con un parser
.
Express nos provee su propio parser
o analizador (a partir de la versión v4.16.0 en adelante). Por lo tanto debemos decirle a nuestra aplicación que use dicho analizador para que el campo body
sea poblado con la data que viene en la solicitud:
app.use(express.json()); // for parsing application/json
app.use(express.urlencoded({ extended: true })); // for parsing application/x-www-form-urlencoded
Con esto ya estamos casi listos, y es que nos falta indicar en el formulario la ruta a la que será enviada la data del mismo. En mi ejemplo estoy usando /ruta
, por lo tanto la data debe ser enviada a:
http://localhost:3000/ruta
En el formulario escribimos el siguiente atributo:
<form name="formulario" action="http://localhost:3000/ruta" method="POST">
...
</form>
De esta forma, el navegador sabrá que los datos del formulario deben ser enviados a la ruta indicada en el atributo action
, usando el método indicado en el atributo method
.
Una forma en la que se puede ver el código sería la siguiente:
// importamos los módulos necesarios
const express = require('express');
const path = require('path');
const mime = require('mime');
//creamos una instancia de express
const app = express();
// puerto donde queremos que escuche nuestro servidor
const port = 3000;
// middleware para proceso de data
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
// escribimos la función que creará nuestra cabecera para archivos estáticos
const setHeadersOnStatic = (res, path, stat) => {
const type = mime.getType(path);
res.set('content-type', type);
}
// creamos el objeto con las opciones para archivos estáticos
const staticOptions = {
setHeaders: setHeadersOnStatic
}
// usamos las opciones en el método static()
app.use(express.static(path.join(__dirname, 'public'), staticOptions));
// middleware para procesar el formulario
app.post('/ruta', (req, res, next) => {
const data = req.body;
console.log(data);
res.status(200).json({
mensaje: 'Datos recibidos',
data
});
});
// levantamos nuestro servidor en el puerto seleccionado
app.listen(port, () => {
console.log(`Servidor iniciado en el puerto: ${port}`);
});
Como puedes ver, en ningún momento se hace uso del módulo http
de Node, ya que todo ese trabajo lo hace Express por nosotros.
HTTP
Por supuesto, todo esto lo puedes hacer sin Express, y para un servidor que sólo sirve archivos estáticos, no es mucho el código por escribir. Sin embargo, manejar las solicitudes puede convertirse en una pesadilla si no se tiene la paciencia y el conocimiento adecuados. Es una de las razones por la cuales se prefiere usar un framework (como Express) que funcione sobre el módulo http
de Node, para que haga todo el trabajo pesado.
Ya tu tenías una parte avanzada para manejar las solicitudes GET y POST a una ruta de tu archivo, usaremos esto mismo y verás que puede ser sencillo esta parte tan básica de tu servidor HTTP con Node.
Igualmente usaremos el módulo mime
para establecer las cabeceras adecuadas cuando se sirve un archivo estático. Tu función webServer
puede verse de la siguiente forma:
function webServer(req, res) {
if(req.method === 'GET'){
const fileRequested = path.join(__dirname, 'public', req.url);
fs.readFile(fileRequested, (err, data) => {
if(err) {
res.writeHead(404);
res.end(JSON.stringify(err));
return;
}
const mimeType = mime.getType(fileRequested);
const headers = {
'content-type': mimeType
};
res.writeHead(200, header);
res.end(data);
});
}
if(req.method === 'POST') {
req
.on('data', data => {
dataString += data;
})
.on('end', () => {
const templateString = `los datos que enviaste por POST como string son: ${dataString}`
console.log(templateString);
const headers = {
'content-type': 'text/plain'
};
res.writeHead(201, headers);
res.end(templateString);
});
}
}
Podemos observar algunos aspectos importantes:
- Usamos
path.join()
y le pasamos como argumentos la ruta __dirname
, el nombre de la carpeta public
y el nombre del archivo solicitado en req.url
- Se establece la cabecera
content-type
de acuerdo al archivo servido en una solicitud GET
- Se usa el método
readFile()
del módulo fs
de Node, para leer el contenido del archivo solicitado.
- Para la respuesta a una solicitud POST, se establece una cabecera fija de tipo
text/plain
ya que se responde con un texto plano. Obviamente esto lo puedes cambiar a gusto de acuerdo a lo que necesites responder.
Por último, tu código usando sólo el módulo http
de Node, para un servicio muy sencillo podría verse de la siguiente forma:
// importamos los módulos necesarios
const http = require('http');
const mime = require('mime');
const path = require('path');
const fs = require('fs');
// establecemos el puerto de escucha de nuestro servidor
const port = 3000;
// creamos la función que manejará las solicitudes
function webServer(req, res) {
if(req.method === 'GET'){
const fileRequested = path.join(__dirname, 'public', req.url);
fs.readFile(fileRequested, (err, data) => {
if(err) {
res.writeHead(404);
res.end(JSON.stringify(err));
return;
}
const mimeType = mime.getType(fileRequested);
const headers = {
'content-type': mimeType
};
res.writeHead(200, headers);
res.end(data);
});
}
if(req.method === 'POST') {
req
.on('data', data => {
dataString += data;
})
.on('end', () => {
const templateString = `los datos que enviaste por POST como string son: ${dataString}`
console.log(templateString);
const headers = {
'content-type': 'text/plain'
};
res.writeHead(201, headers);
res.end(templateString);
});
}
}
// instanciamos el servidor
const server = http.createServer(webServer);
// levantamos el servidor en el puerto establecido
server.listen(port, () => {
console.log(`Servidor escuchando en el puerto: ${port}`);
});
Parte del código anterior es tomado de How to serve static files.
Con esto tenemos la misma funcionalidad básica que hemos creado anteriormente con Express, pero en este caso sólo usando el módulo http
de Node y el módulo mime
para los tipos de archivos.
Espero que esto resuelva tu duda.