Servir archivos estáticos de javascript con Node.js, Socket.IO y Express

Tengo una sencilla aplicación node.js que usa socket.io y express. En este momento, todo el javascript está en el archivo HTML pero me gustaría intentar separarlo en un archivo .js.

En mi aplicación de nodo principal tengo esto:

var app = require('express')(); var http = require('http').Server(app); var io = require('socket.io')(http); app.get('/', function (req, res) { res.sendFile(__dirname + '/index.html'); }); 

Esto funciona bien hasta que muevo mi javascript de index.html a un archivo .js y luego trato de hacer referencia a él desde mi archivo HTML como este:

  

Creo que Express no está sirviendo el archivo estático, así que he intentado esto:

 app.get('/', function (req, res) { res.sendFile(__dirname + '/functions.js'); }); 

¿Alguien puede decirme lo que estoy haciendo mal?

nodejs y express no sirven CUALQUIER archivo por defecto. Entonces, cuando creaste tu primera ruta:

 app.get('/', function (req, res) { res.sendFile(__dirname + '/index.html'); }); 

Eso permitió con éxito una solicitud del navegador para / ver su archivo index.html. El navegador recibirá ese archivo HTML y lo analizará. Si encuentra tags dentro de ese archivo, hará una nueva solicitud web a su servidor. Entonces, si ese archivo tiene esto:

   

El navegador, le pedirá a su servidor para /functions.js . Como no tenía una ruta para esa solicitud, su servidor devolverá un error 404 y el navegador no obtendrá su archivo de script.

Por lo tanto, debe crear una ruta que sirva correctamente a /functions.js cuando el navegador lo /functions.js , mientras mantiene su ruta existente que sirve al archivo index.html.

Puede hacer una ruta específica para /functions.js tal como lo hizo para / . O, para archivos estáticos, puede usar express.static() para crear una ruta inteligente que pueda servir a muchos archivos estáticos.

Para usar express.static() usted crea un directorio en su servidor (puede estar en cualquier lugar), pero la gente a menudo lo coloca debajo del directorio donde se encuentran los archivos de su servidor. Por lo general, elijo darle nombre public por lo que es obvio para todos que estos archivos están disponibles públicamente. Luego, puede crear una ruta inteligente utilizando express.static como este:

 app.use(express.static("/js", path.join(__dirname, "public"))); 

Esta línea de middleware indica a Express que si hay alguna solicitud que comience con /js , busque un archivo coincidente en el __dirname + "/public" . Entonces, si entra una solicitud para /js/functions.js , busque un archivo llamado __dirname + "/public/functions.js" . Si se encuentra ese archivo, entonces sírvalo automáticamente. Para que esto funcione correctamente en su archivo index.html, debería hacer que la etiqueta sea ​​esta:

   

El prefijo /js/ que he usado aquí depende exclusivamente de usted. Ni siquiera tiene que usar un prefijo y se le puede asignar el nombre que desee. Solo debes asegurarte de que el prefijo que usas en la etiqueta coincida con el prefijo que usas en el primer argumento pasado a express.static() . Me gusta usar un prefijo para mis archivos estáticos JS y CSS para que se almacenen y busquen en una ubicación que sea diferente a mis archivos HTML principales (eso es solo una de mis preferencias personales, pero en el futuro también podría hacer que el almacenamiento en caché sea más sencillo o hacer que el uso de algo como NGINX para mejorar el rendimiento sea más simple también.


Para usar express.static() , debe guardar una referencia al módulo express cambiando esto:

 var app = require('express')(); 

a esto:

 var express = require('express'); var app = express(); 

O, en cualquier versión reciente de nodejs, prefiero usar const para variables que no deben ser reasignadas:

 const express = require('express'); const app = express(); 

La solución es muy simple: utilice la función de middleware incorporada express.static en express.

Por ejemplo, puede agregar esto a su aplicación de nodo principal:

app.use("/js", static(__dirname + '/js'));

Para obtener más detalles, lea esto: https://expressjs.com/en/starter/static-files.html