Usando node.js como un simple servidor web

1103

Quiero ejecutar un servidor HTTP muy simple. Cada solicitud GET example.comdebe ser index.htmlatendida, pero como una página HTML normal (es decir, la misma experiencia que cuando lee páginas web normales).

Usando el siguiente código, puedo leer el contenido de index.html. ¿Cómo sirvo index.htmlcomo página web normal?

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end(index);
}).listen(9615);

Una de las sugerencias a continuación es complicada y requiere que escriba una getlínea para cada archivo de recursos (CSS, JavaScript, imágenes) que quiero usar.

¿Cómo puedo servir una sola página HTML con algunas imágenes, CSS y JavaScript?

idophir
fuente
21
Eche un vistazo al módulo npm "connect". Proporciona dicha funcionalidad básica y es la base de muchas configuraciones y otros paquetes.
Mörre
55
Debe poner su solución como respuesta y marcarla como correcta.
graham.reeds
8
Pude encontrar una solución perfecta de Eric B. Sowell llamada Servir archivos estáticos desde el nodo js . Lee todo el asunto. Muy recomendable.
idophir
1
Echa un vistazo a un módulo que escribí llamado Cachemere. También almacena automáticamente en caché todos sus recursos. github.com/topcloud/cachemere
Jon
1
local-web-server es un buen ejemplo para mirar
Lloyd

Respuestas:

993

El servidor más simple de Node.js es solo:

$ npm install http-server -g

Ahora puede ejecutar un servidor mediante los siguientes comandos:

$ cd MyApp

$ http-server

Si está utilizando NPM 5.2.0 o posterior, puede usarlo http-serversin instalarlo npx. No se recomienda su uso en producción, pero es una excelente manera de hacer que un servidor se ejecute rápidamente en localhost.

$ npx http-server

O bien, puede intentar esto, que abre su navegador web y habilita las solicitudes CORS:

$ http-server -o --cors

Para obtener más opciones, consulte la documentación de http-serverGitHub o ejecute:

$ http-server --help

Muchas otras características agradables y una implementación simple para NodeJitsu.

Tenedores de características

Por supuesto, puede recargar fácilmente las funciones con su propio tenedor. Es posible que ya lo haya hecho en uno de los más de 800 tenedores de este proyecto:

Servidor ligero: una alternativa de actualización automática

Una buena alternativa a http-serveres light-server. Admite la visualización de archivos y la actualización automática y muchas otras funciones.

$ npm install -g light-server 
$ light-server

Agregar al menú contextual del directorio en el Explorador de Windows

 reg.exe add HKCR\Directory\shell\LightServer\command /ve /t REG_EXPAND_SZ /f /d "\"C:\nodejs\light-server.cmd\" \"-o\" \"-s\" \"%V\""

Servidor JSON REST simple

Si necesita crear un servidor REST simple para un proyecto prototipo, entonces json-server podría ser lo que está buscando.

Editores de actualización automática

La mayoría de los editores de páginas web y las herramientas IDE ahora incluyen un servidor web que vigilará sus archivos fuente y actualizará automáticamente su página web cuando cambien.

Yo uso Live Server con Visual Studio Code.

El editor de texto de código abierto Brackets también incluye un servidor web estático NodeJS. Simplemente abra cualquier archivo HTML entre paréntesis, presione " Vista previa en vivo " e iniciará un servidor estático y abrirá su navegador en la página. El navegador ** se actualizará automáticamente cada vez que edite y guarde el archivo HTML. Esto es especialmente útil cuando se prueban sitios web adaptativos. Abra su página HTML en múltiples navegadores / tamaños de ventana / dispositivos. Guarde su página HTML y vea instantáneamente si su material adaptativo funciona, ya que todos se actualizan automáticamente.

PhoneGap Developers

Si está codificando una aplicación móvil híbrida , puede interesarle saber que el equipo de PhoneGap incorporó este concepto de actualización automática con su nueva aplicación PhoneGap . Esta es una aplicación móvil genérica que puede cargar los archivos HTML5 desde un servidor durante el desarrollo. Este es un truco muy hábil ya que ahora puede omitir los pasos lentos de compilación / implementación en su ciclo de desarrollo para aplicaciones móviles híbridas si está cambiando archivos JS / CSS / HTML, que es lo que está haciendo la mayor parte del tiempo. También proporcionan el servidor web NodeJS estático (ejecución phonegap serve) que detecta cambios en los archivos.

PhoneGap + Sencha Touch Developers

Ahora he adaptado ampliamente el servidor estático PhoneGap y la aplicación para desarrolladores PhoneGap para los desarrolladores Sencha Touch y jQuery Mobile. Compruébalo en Sencha Touch Live . Admite --qr QR Codes y --localtunnel que envía su servidor estático desde su computadora de escritorio a una URL fuera de su firewall. Toneladas de usos. Aceleración masiva para desarrolladores móviles híbridos.

Desarrolladores de Cordova + Ionic Framework

El servidor local y las funciones de actualización automática están integradas en la ionicherramienta. Simplemente ejecute ionic servedesde la carpeta de su aplicación. Aún mejor ... ionic serve --labpara ver las vistas de actualización automática de lado a lado de iOS y Android.

Tony O'Hagan
fuente
99
npm install live-server -g si desea lo mismo, pero con recarga automática cuando detecta un cambio de archivo
3
Un pequeño "gotcha" -. el servidor http está predeterminado para servir el sitio en 0.0.0.0. Por lo tanto, DEBE especificar una dirección IP para que funcione correctamente como servidor de prueba local:http-server -a localhost
JESii
1
Sí ... 0.0.0.0 hará que se vincule a TODAS las IP de todos sus dispositivos en red IP (WiFi, Cable, Bluetooth), lo cual es una mala idea en cualquier red pública, ya que podría ser pirateado. No es tan malo si solo desea hacer una demostración de su aplicación dentro de una red segura con paredes de fuego para mostrar a otros o conectarla a su dispositivo móvil en la misma red.
Tony O'Hagan
Pequeña herramienta realmente útil. Tengo muchas aplicaciones Node ejecutándose en mi servidor, así que agrego una opción "-p" para elegir un puerto que no sea 8080. Por ejemplo: nohup http-server -p 60080 & (lo inicia en segundo plano y le permite desconectarse del sesión de shell.) Debe asegurarse de que el puerto esté abierto al mundo, por ejemplo: iptables -I INPUT 1 -p tcp --dport 60090 -j ACCEPT (en muchos sistemas Linux)
Blisterpeanuts
Cómo ejecutarlo como servicio, para que pueda usarlo incluso cerrando el símbolo del sistema. ¿Hay alguna herramienta que proporcione este tipo si no es esto?
Sandeep sandy
983

Puede usar Connect y ServeStatic con Node.js para esto:

  1. Instalar connect y serve-static con NPM

    $ npm install connect serve-static
  2. Cree un archivo server.js con este contenido:

    var connect = require('connect');
    var serveStatic = require('serve-static');
    
    connect()
        .use(serveStatic(__dirname))
        .listen(8080, () => console.log('Server running on 8080...'));
  3. Ejecutar con Node.js

    $ node server.js

Ahora puedes ir a http://localhost:8080/yourfile.html

Gian Marco Gherardi
fuente
24
La idea era no usar una biblioteca existente, por razones educativas, pero creo que usar Express es un mejor consejo que su versión de nivel inferior, Connect.
idophir
135
La parte de Express que sirve archivos estáticos es solo Connect, por lo que no veo la razón para usar Express para servir archivos estáticos. Pero sí, también Express hará el trabajo.
Gian Marco Gherardi
77
Excelente consejo Los pasos anteriores funcionaron para mis propósitos muy bien. Gracias a Gian, aquí está el enlace a Express donde revela que está construido en Connect, expressjs.com Aquí está cómo usar Express: expressjs.com/guide.html
Jack Stone
10
No funciona para mí, el resultado no puede OBTENER /test.html. ¿Debo reemplazar __dirname con un nombre de directorio?
Timo
3
Ahora, connect ha cambiado a la versión 3. Por lo tanto, uno tiene que usar serve-static como se describe en miqid. Publiqué otra respuesta con el código completo para conectar v3.
tomé el
160

Mira esta esencia . Lo estoy reproduciendo aquí como referencia, pero la esencia se ha actualizado regularmente.

Servidor web de archivos estáticos Node.JS. Póngalo en su ruta para iniciar servidores en cualquier directorio, toma un argumento de puerto opcional.

var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs"),
    port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

  fs.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      response.writeHead(200);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");

Actualizar

La esencia maneja archivos css y js. Lo he usado yo mismo. Usar lectura / escritura en modo "binario" no es un problema. Eso solo significa que el archivo no es interpretado como texto por la biblioteca de archivos y no está relacionado con el tipo de contenido devuelto en la respuesta.

El problema con su código es que siempre devuelve un tipo de contenido de "texto / sin formato". El código anterior no devuelve ningún tipo de contenido, pero si solo lo está utilizando para HTML, CSS y JS, un navegador puede inferirlos perfectamente. Ningún tipo de contenido es mejor que uno incorrecto.

Normalmente, el tipo de contenido es una configuración de su servidor web. Así que lo siento si esto no resuelve tu problema, pero funcionó para mí como un servidor de desarrollo simple y pensé que podría ayudar a otras personas. Si necesita tipos de contenido correctos en la respuesta, debe definirlos explícitamente como joeytwiddle o usar una biblioteca como Connect que tenga valores predeterminados razonables. Lo bueno de esto es que es simple y autónomo (sin dependencias).

Pero siento tu problema. Así que aquí está la solución combinada.

var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs")
    port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

  var contentTypesByExtension = {
    '.html': "text/html",
    '.css':  "text/css",
    '.js':   "text/javascript"
  };

  fs.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      var headers = {};
      var contentType = contentTypesByExtension[path.extname(filename)];
      if (contentType) headers["Content-Type"] = contentType;
      response.writeHead(200, headers);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");
Jonathan Tran
fuente
3
Esto realmente no resuelve el "problema". Devuelve index.html como un archivo binario y no maneja css y js.
idophir el
44
Se maneja css y js. No devuelve index.html como un archivo binario. Simplemente copia los datos del disco en cualquier formato. Consulte las actualizaciones para obtener más explicaciones.
Jonathan Tran
Un problema con el código, distingue entre mayúsculas y minúsculas, en Unix para ciertos archivos, da 404
Pradeep
2
Tenga en cuenta que "path.exists y path.existsSync ahora están en desuso. Utilice fs.exists y fs.existsSync". stackoverflow.com/a/5008295/259
David Sykes
3
Tenga en cuenta que fs.exists()ahora también está en desuso. Captura el error en fs.stat()lugar de crear una condición de carrera.
Matt
100

No necesitas expreso. No necesitas conectarte. Node.js hace http NATIVELY. Todo lo que necesita hacer es devolver un archivo dependiente de la solicitud:

var http = require('http')
var url = require('url')
var fs = require('fs')

http.createServer(function (request, response) {
    var requestUrl = url.parse(request.url)    
    response.writeHead(200)
    fs.createReadStream(requestUrl.pathname).pipe(response)  // do NOT use fs's sync methods ANYWHERE on production (e.g readFileSync) 
}).listen(9615)    

Un ejemplo más completo que garantiza que las solicitudes no puedan acceder a los archivos debajo de un directorio base y que maneje los errores de manera adecuada:

var http = require('http')
var url = require('url')
var fs = require('fs')
var path = require('path')
var baseDirectory = __dirname   // or whatever base directory you want

var port = 9615

http.createServer(function (request, response) {
    try {
        var requestUrl = url.parse(request.url)

        // need to use path.normalize so people can't access directories underneath baseDirectory
        var fsPath = baseDirectory+path.normalize(requestUrl.pathname)

        var fileStream = fs.createReadStream(fsPath)
        fileStream.pipe(response)
        fileStream.on('open', function() {
             response.writeHead(200)
        })
        fileStream.on('error',function(e) {
             response.writeHead(404)     // assume the file doesn't exist
             response.end()
        })
   } catch(e) {
        response.writeHead(500)
        response.end()     // end the response so browsers don't hang
        console.log(e.stack)
   }
}).listen(port)

console.log("listening on port "+port)
BT
fuente
3
Si no me equivoco, esta solución no se ocupa del tipo de codificación, por lo que las solicitudes de páginas e imágenes HTML obtendrán la misma codificación. ¿No es así?
idophir
2
@idophir La mayoría de las veces, la codificación no importa, los navegadores la infieren en función de las etiquetas html utilizadas, u otra información, o adivinan muy bien. Como alguien mencionado anteriormente, ningún tipo MIME es mejor que uno incorrecto. Ciertamente puede usar algo como node-mime para descubrir los tipos de archivos mime, pero un servidor http totalmente compatible con la web está fuera del alcance de esta pregunta.
BT
1
@Rooster No deberías necesitar nada especial, simplemente node thisfile.js. Se ejecutará, escuchando nuevas conexiones y devolviendo nuevos resultados, hasta que A. esté cerrado por una señal o B. algún error loco de alguna manera cause la terminación del programa.
BT
1
@Rooster Otro daemonizer de cierta reputación se encuentra en github.com/Unitech/pm2
Travelling Man
1
Me gusta más esta respuesta, pero hay dos problemas: 1) Devuelve 200 cuando debería devolver 404; para arreglarlo, llamo writeHead (200) dentro de una devolución de llamada 'abierta'. 2) Si hay un error, el zócalo se deja abierto; para arreglarlo llamo response.destroy () en la devolución de llamada 'error'.
Paul Brannan
70

Creo que la parte que te estás perdiendo en este momento es que estás enviando:

Content-Type: text/plain

Si desea que un navegador web represente el HTML, debe cambiar esto a:

Content-Type: text/html
clee
fuente
Gracias por la rápida respuesta. La página ahora se carga pero sin el CSS. ¿Cómo puedo obtener una página html estándar con CSS y JS cargados?
idófiro
20
Necesita comenzar a extender ese servidor. En este momento solo sabe cómo servir index.html: debe enseñarle cómo servir foo.css y foo.js ahora, con sus propios tipos MIME apropiados.
clee
1
Si no desea servir archivos estáticos, puede colocar su CSS en una <style>etiqueta.
Keith
1
Después de nueve años, esto realmente debería aceptarse como la respuesta correcta.
rooch84
46

Paso 1 (dentro del símbolo del sistema [Espero que cd A SU CARPETA]): npm install express

Paso 2: crea un archivo server.js

var fs = require("fs");
var host = "127.0.0.1";
var port = 1337;
var express = require("express");

var app = express();
app.use(express.static(__dirname + "/public")); //use static files in ROOT/public folder

app.get("/", function(request, response){ //root dir
    response.send("Hello!!");
});

app.listen(port, host);

Tenga en cuenta que también debe agregar WATCHFILE (o usar nodemon). El código anterior es solo para un servidor de conexión simple.

PASO 3: node server.js onodemon server.js

Ahora hay un método más fácil si solo desea alojar un servidor HTTP simple. npm install -g http-server

y abra nuestro directorio y escriba http-server

https://www.npmjs.org/package/http-server

ACERO
fuente
@STEEL, ¿hay alguna manera de iniciar el servidor de nodo automáticamente? Quiero decir, sin ir a la ruta del directorio y luego escribir el servidor de nodos, solo se iniciará. Quiero iniciar el servidor de nodo como IIS. me puedes decir
Vinoth
@ Vin sí, hay muchas maneras. ¿Cuál es su propósito u objetivo exacto, puedo ayudarlo?
STEEL
@steel quiero iniciar el servidor automáticamente sin dar el servidor de nodo en el símbolo del sistema. este es mi requisito si es posible, ¿podría decirme algún ejemplo
Vinoth
Deberá utilizar alguna herramienta como ThoughtWorks GO, que puede ejecutar comandos de Terminal con un clic desde el navegador.
STEEL
32

La manera rápida:

var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/../public')); // ← adjust
app.listen(3000, function() { console.log('listening'); });

A tu manera:

var http = require('http');
var fs = require('fs');

http.createServer(function (req, res) {
    console.dir(req.url);

    // will get you  '/' or 'index.html' or 'css/styles.css' ...
    // • you need to isolate extension
    // • have a small mimetype lookup array/object
    // • only there and then reading the file
    // •  delivering it after setting the right content type

    res.writeHead(200, {'Content-Type': 'text/html'});

    res.end('ok');
}).listen(3001);
Frank Nocke
fuente
19

En lugar de tratar con una declaración de cambio, creo que es mejor buscar el tipo de contenido de un diccionario:

var contentTypesByExtension = {
    'html': "text/html",
    'js':   "text/javascript"
};

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';
joeytwiddle
fuente
Sí, se ve mucho más elegante que la solución de "cambio" utilizada por Eric B. Sowell (ver la respuesta seleccionada). Gracias.
idophir
Esta respuesta es totalmente fuera de contexto ... Se refiere a este enlace dentro de este comentario - stackoverflow.com/questions/6084360/... (sí, lo que sea, Internet se ha roto)
Marte Robertson
15

Esta es básicamente una versión actualizada de la respuesta aceptada para conectar la versión 3:

var connect = require('connect');
var serveStatic = require('serve-static');

var app = connect();

app.use(serveStatic(__dirname, {'index': ['index.html']}));
app.listen(3000);

También agregué una opción predeterminada para que index.html se sirva como predeterminado.

al conocido
fuente
13

No necesita usar ningún módulo NPM para ejecutar un servidor simple, hay una biblioteca muy pequeña llamada " Servidor libre NPM " para Node:

50 líneas de código, salidas si está solicitando un archivo o una carpeta y le da un color rojo o verde si no funciona. Menos de 1 KB de tamaño (minificado).

Jaredcheeda
fuente
Excelente opcion. Sirve html, css, js e imágenes. Genial para la depuración. Simplemente sustituya este código como está para su server.js.
pollaris
2
¡Ojalá pudiera agregar más votos a favor! ¡Esto es genial! Realicé un pequeño cambio var filename = path.join(process.cwd() + '/dist/', uri); en el servidor desde la carpeta dist . Puse el código server.jsy simplemente funciona cuando escribonpm start
John Henckel
Cómo ejecutarlo como servicio, para que pueda usarlo incluso cerrando el símbolo del sistema. ¿Hay alguna herramienta que proporcione este tipo si no es esto?
Sandeep sandy
13

si tiene un nodo instalado en su PC, probablemente tenga el NPM, si no necesita cosas de NodeJS, puede usar el paquete de servicio para esto:

1 - Instala el paquete en tu PC:

npm install -g serve

2 - Sirve tu carpeta estática:

serve <path> 
d:> serve d:\StaticSite

Le mostrará en qué puerto se está sirviendo su carpeta estática, solo navegue hasta el host como:

http://localhost:3000
Diego Mendes
fuente
Cómo ejecutarlo como servicio, para que pueda usarlo incluso cerrando el símbolo del sistema. ¿Hay alguna herramienta que proporcione este tipo si no es esto?
Sandeep sandy
Esta debería ser la respuesta aceptada. Porque es lo más fácil y funciona fuera de la caja. Por lo tanto, si ejecuta solo el servicio sin la ruta, ejecutará el servidor desde la carpeta actual (aquella en la que ha CD-ed previamente).
Игор Рајачић
9

Encontré una biblioteca interesante en npm que podría serle útil. Se llama mime ( npm install mimeo https://github.com/broofa/node-mime ) y puede determinar el tipo mime de un archivo. Aquí hay un ejemplo de un servidor web que escribí usándolo:

var mime = require("mime"),http = require("http"),fs = require("fs");
http.createServer(function (req, resp) {
path  = unescape(__dirname + req.url)
var code = 200
 if(fs.existsSync(path)) {
    if(fs.lstatSync(path).isDirectory()) {
        if(fs.existsSync(path+"index.html")) {
        path += "index.html"
        } else {
            code = 403
            resp.writeHead(code, {"Content-Type": "text/plain"});
            resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
        }
    }
    resp.writeHead(code, {"Content-Type": mime.lookup(path)})
    fs.readFile(path, function (e, r) {
    resp.end(r);

})
} else {
    code = 404
    resp.writeHead(code, {"Content-Type":"text/plain"});
    resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
}
console.log("GET "+code+" "+http.STATUS_CODES[code]+" "+req.url)
}).listen(9000,"localhost");
console.log("Listening at http://localhost:9000")

Esto servirá cualquier archivo de texto o imagen regular (.html, .css, .js, .pdf, .jpg, .png, .m4a y .mp3 son las extensiones que he probado, pero en teoría debería funcionar para todo)

Notas del desarrollador

Aquí hay un ejemplo de salida que obtuve con él:

Listening at http://localhost:9000
GET 200 OK /cloud
GET 404 Not Found /cloud/favicon.ico
GET 200 OK /cloud/icon.png
GET 200 OK /
GET 200 OK /501.png
GET 200 OK /cloud/manifest.json
GET 200 OK /config.log
GET 200 OK /export1.png
GET 200 OK /Chrome3DGlasses.pdf
GET 200 OK /cloud
GET 200 OK /-1
GET 200 OK /Delta-Vs_for_inner_Solar_System.svg

Observe la unescapefunción en la construcción del camino. Esto es para permitir nombres de archivos con espacios y caracteres codificados.

AlcaldeMonty
fuente
8

Editar:

La aplicación de muestra Node.js Node Chat tiene la funcionalidad que desea.
En su archivo README.text
3. El paso es lo que está buscando.

paso 1

  • crear un servidor que responda con hello world en el puerto 8002

paso 2

  • crear un index.html y servirlo

paso 3

  • introduce util.js
  • cambiar la lógica para que se sirva cualquier archivo estático
  • muestre 404 en caso de que no se encuentre ningún archivo

paso 4

  • agregar jquery-1.4.2.js
  • agregar client.js
  • cambie index.html para solicitar al usuario el apodo

Aquí está el server.js

Aquí está el util.js

Kerem Baydoğan
fuente
55
No me importa Solo tengo index.html. Solo quiero cargar el html + css + js. ¡Gracias!
idófiro
16
-1 para .readFileSyncen una devolución de llamada. Con node.js usamos IO sin bloqueo. Por favor no recomiende Synccomandos.
Raynos
Hola @krmby, gracias por intentar ayudar. Soy realmente nuevo en esto. Descargué server.js y util.js. Cuando ejecuto "node server.js" e intento acceder a la página usando un navegador, aparece este error: TypeError: Object # <ServerResponse> no tiene ningún método 'close' en /var/www/hppy-site/util.js : 67: 8 en /var/www/hppy-site/util.js:56:4 en [object Object]. <anonymous> (fs.js: 107: 5) en [object Object] .emit (events.js : 61: 17) en afterRead (fs.js: 970: 12) en wrapper (fs.js: 245: 17) ¿Alguna idea? Por cierto, lo mismo sucede cuando descargo su proyecto y lo ejecuto.
idophir
1
Lo siento. Estaba usando una nueva versión. Reemplazado res.close () con res.end ()
idophir
8

La forma en que lo hago es, en primer lugar, instalar el servidor estático de nodo globalmente a través de

npm install node-static -g

luego navegue al directorio que contiene sus archivos html e inicie el servidor estático con static .

Vaya al navegador y escriba localhost:8080/"yourHtmlFile".

Samba
fuente
1
Nada es mejor que una frase. ¡Gracias!
AndroidDev
Cómo ejecutarlo como servicio, para que pueda usarlo incluso cerrando el símbolo del sistema. ¿Hay alguna herramienta que proporcione este tipo si no es esto?
Sandeep sandy
7
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    // change the to 'text/plain' to 'text/html' it will work as your index page
    res.end(index);
}).listen(9615);

Creo que estabas buscando esto. En su index.html, simplemente llénelo con el código html normal, lo que quiera renderizar en él, como:

<html>
    <h1>Hello world</h1>
</html>
Ashish Ranjan
fuente
7

Básicamente copiando la respuesta aceptada, pero evitando crear un archivo js.

$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);

Lo encontré muy conveniente.

Actualizar

A partir de la última versión de Express, serve-static se ha convertido en un middleware separado. Use esto para servir:

require('http').createServer(require('serve-static')('.')).listen(3000)

Instalar serve-staticprimero.

Xiao Peng - ZenUML.com
fuente
6

de w3schools

es bastante fácil crear un servidor de nodo para servir cualquier archivo que se solicite, y no necesita instalar ningún paquete para él

var http = require('http');
var url = require('url');
var fs = require('fs');

http.createServer(function (req, res) {
  var q = url.parse(req.url, true);
  var filename = "." + q.pathname;
  fs.readFile(filename, function(err, data) {
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'});
      return res.end("404 Not Found");
    }  
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    return res.end();
  });
}).listen(8080);

http: // localhost: 8080 / file.html

servirá file.html desde el disco

Ahmed M. Matar
fuente
5

Utilizo el siguiente código para iniciar un servidor web simple que representa el archivo html predeterminado si no se menciona ningún archivo en la URL.

var http = require('http'),
fs = require('fs'),
url = require('url'),
rootFolder = '/views/',
defaultFileName = '/views/5 Tips on improving Programming Logic   Geek Files.htm';


http.createServer(function(req, res){

    var fileName = url.parse(req.url).pathname;
    // If no file name in Url, use default file name
    fileName = (fileName == "/") ? defaultFileName : rootFolder + fileName;

    fs.readFile(__dirname + decodeURIComponent(fileName), 'binary',function(err, content){
        if (content != null && content != '' ){
            res.writeHead(200,{'Content-Length':content.length});
            res.write(content);
        }
        res.end();
    });

}).listen(8800);

Representará todos los archivos js, css e imagen, junto con todo el contenido html.

Acuerde la declaración " Ningún tipo de contenido es mejor que uno incorrecto "

Sachin303
fuente
5

No estoy seguro de si esto es exactamente lo que quería, sin embargo, puede intentar cambiar:

{'Content-Type': 'text/plain'}

a esto:

{'Content-Type': 'text/html'}

Esto hará que el cliente del navegador muestre el archivo como html en lugar de texto sin formato.

Xenry
fuente
1
¿No es esto lo mismo que esta respuesta existente ?
Pang
4
var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'html'});
res.end(index);
}).listen(9615);

//Just Change The CONTENT TYPE to 'html'
usuario3389163
fuente
66
El Content-Typedebería ser text/html, ya que se define de esta manera: Content-Type := type "/" subtype *[";" parameter].
t.niese
1
Esto parece convertir todos mis archivos en esa carpeta en tipo html, incluso si es js ...
ahnbizcad 05 de
Funciona muy bien ...
golpea cereza el
4

Una versión 4.x express un poco más detallada pero que proporciona un listado de directorios, compresión, almacenamiento en caché y solicitudes de registro en un número mínimo de líneas

var express = require('express');
var compress = require('compression');
var directory = require('serve-index');
var morgan = require('morgan'); //logging for express

var app = express();

var oneDay = 86400000;

app.use(compress());
app.use(morgan());
app.use(express.static('filesdir', { maxAge: oneDay }));
app.use(directory('filesdir', {'icons': true}))

app.listen(process.env.PORT || 8000);

console.log("Ready To serve files !")
Bruno Grieder
fuente
4

Gran cantidad de respuestas complicadas aquí. Si no tiene la intención de procesar archivos / base de datos nodeJS pero solo quiere servir html / css / js / images estáticas como sugiere su pregunta, simplemente instale el módulo de servidor de estado de inserción o similar;

Aquí hay un "one liner" que creará y lanzará un mini sitio. Simplemente pegue todo el bloque en su terminal en el directorio apropiado.

mkdir mysite; \
cd mysite; \
npm install pushstate-server --save; \
mkdir app; \
touch app/index.html; \
echo '<h1>Hello World</h1>' > app/index.html; \
touch server.js; \
echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './app' });" > server.js; \
node server.js

Abra el navegador y vaya a http: // localhost: 3000 . Hecho.

El servidor usará el appdirectorio como la raíz para servir archivos. Para agregar activos adicionales simplemente colóquelos dentro de ese directorio.

cyberwombat
fuente
2
Si ya tiene estadísticas, puede usar lo siguiente:npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Girar el
4

Ya hay algunas grandes soluciones para un simple nodejs server. Hay una solución más si la necesita live-reloadingmientras realiza cambios en sus archivos.

npm install lite-server -g

navegar su directorio y hacer

lite-server

te abrirá el navegador con la recarga en vivo.

lokeshjain2008
fuente
4

La función Express sendFile hace exactamente lo que necesita, y dado que desea la funcionalidad del servidor web desde el nodo, express es una opción natural y luego servir archivos estáticos se vuelve tan fácil como:

res.sendFile('/path_to_your/index.html')

Lea más aquí: https://expressjs.com/en/api.html#res.sendFile

Un pequeño ejemplo con el servidor web express para el nodo:

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

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

app.listen(8080);

ejecuta esto y navega a http: // localhost: 8080

Para ampliar esto para permitirle servir archivos estáticos como CSS e imágenes, aquí hay otro ejemplo:

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

app.use(express.static(__dirname + '/css'));

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

app.listen(8080);

así que cree una subcarpeta llamada css, coloque su contenido estático y estará disponible en su index.html para una referencia fácil como:

<link type="text/css" rel="stylesheet" href="/css/style.css" />

Observe la ruta relativa en href!

voila!

Mladen Oršolić
fuente
3

La mayoría de las respuestas anteriores describen muy bien cómo se sirven los contenidos. Lo que estaba buscando como adicional era una lista del directorio para que se puedan examinar otros contenidos del directorio. Aquí está mi solución para más lectores:

'use strict';

var finalhandler = require('finalhandler');
var http = require('http');
var serveIndex = require('serve-index');
var serveStatic = require('serve-static');
var appRootDir = require('app-root-dir').get();
var log = require(appRootDir + '/log/bunyan.js');

var PORT = process.env.port || 8097;

// Serve directory indexes for reports folder (with icons)
var index = serveIndex('reports/', {'icons': true});

// Serve up files under the folder
var serve = serveStatic('reports/');

// Create server
var server = http.createServer(function onRequest(req, res){
    var done = finalhandler(req, res);
    serve(req, res, function onNext(err) {
    if (err)
        return done(err);
    index(req, res, done);
    })
});


server.listen(PORT, log.info('Server listening on: ', PORT));
Abu Shumon
fuente
2

Esta es una de las soluciones más rápidas que uso para ver rápidamente páginas web

sudo npm install ripple-emulator -g

A partir de entonces solo ingrese el directorio de sus archivos html y ejecute

ripple emulate

luego cambie el dispositivo a Nexus 7 horizontal.

Helzgate
fuente
55
¿Qué tiene un Nexus 7 todo con esto?
Waeltken
2

La versión más simple que he encontrado es la siguiente. Para fines educativos, es mejor, ya que no utiliza ninguna biblioteca abstracta.

var http = require('http'),
url = require('url'),
path = require('path'),
fs = require('fs');

var mimeTypes = {
  "html": "text/html",
  "mp3":"audio/mpeg",
  "mp4":"video/mp4",
  "jpeg": "image/jpeg",
  "jpg": "image/jpeg",
  "png": "image/png",
  "js": "text/javascript",
  "css": "text/css"};

http.createServer(function(req, res) {
    var uri = url.parse(req.url).pathname;
    var filename = path.join(process.cwd(), uri);
    fs.exists(filename, function(exists) {
        if(!exists) {
            console.log("not exists: " + filename);
            res.writeHead(200, {'Content-Type': 'text/plain'});
            res.write('404 Not Found\n');
            res.end();
            return;
        }
        var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
        res.writeHead(200, {'Content-Type':mimeType});

        var fileStream = fs.createReadStream(filename);
        fileStream.pipe(res);

    }); //end path.exists
}).listen(1337);

Ahora ve al navegador y abre lo siguiente:

http://127.0.0.1/image.jpg

Aquí image.jpgdebe estar en el mismo directorio que este archivo. Espero que esto ayude a alguien :)

Kaushal28
fuente
No debes adivinar el tipo mime del nombre del archivo.
mwieczorek
Nota: fs.exists () ha quedado en desuso, fs.existsSync () es el reemplazo directo.
JWAspin
@mwieczorek, ¿cómo se debe adivinar? ¿Te perdiste que él está dividiendo la extensión del archivo?
James Newton
Es posible que desee utilizar: let mimeType = mimeTypes [filename.split ("."). Pop ()] || "application / octet-stream"
James Newton
1

También puedo recomendar SugoiJS, es muy fácil de configurar y ofrece la opción de comenzar a escribir rápidamente y tiene excelentes características.

Eche un vistazo aquí para comenzar: http://demo.sugoijs.com/ , documentación: https://wiki.sugoijs.com/

Tiene decoradores de gestión de solicitudes, decoradores de políticas de solicitud y políticas de autorización.

Por ejemplo:

import {Controller,Response,HttpGet,RequestParam} from "@sugoi/server";

@Controller('/dashboard')
export class CoreController{
    constructor(){}

    @HttpGet("/:role")
    test(@RequestParam('role') role:string,
         @RequestHeader("role") headerRole:string){
        if(role === headerRole )
            return "authorized";
        else{
            throw new Error("unauthorized")
        }
    }
}
Gen4ik
fuente
1

Es muy fácil con las toneladas de bibliotecas presentes hoy. Las respuestas aquí son funcionales. Si quieres otra versión para comenzar más rápido y simple

Por supuesto, primero instale node.js. Más tarde:

> # module with zero dependencies
> npm install -g @kawix/core@latest 
> # change /path/to/static with your folder or empty for current
> kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js" /path/to/static

Aquí el contenido de " https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js " (no necesita descargarlo, publiqué para entender cómo funciona detrás)

// you can use like this:
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" /path/to/static
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" 

// this will download the npm module and make a local cache
import express from 'npm://express@^4.16.4'
import Path from 'path'

var folder= process.argv[2] || "."
folder= Path.resolve(process.cwd(), folder)
console.log("Using folder as public: " + folder)

var app = express() 
app.use(express.static(folder)) 
app.listen(8181)
console.log("Listening on 8181")
James Suárez
fuente