Usando node.js como un simple servidor web

Quiero ejecutar un servidor HTTP muy simple. Cada solicitud GET a example.com debe recibir index.html 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.html como una 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 sugerencia a continuación es complicada y requiere que escriba una lí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?

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 el archivo server.js con este contenido:

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

     $ node server.js 

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

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

 $ npm install http-server -g 

Ahora puede ejecutar un servidor a través de los siguientes comandos:

 $ cd MyApp $ http-server 

Si está usando NPM 5.2.0 o posterior, puede usar http-server sin instalarlo con npx . No se recomienda su uso en producción, pero es una forma excelente de obtener rápidamente un servidor ejecutándose en localhost.

 $ npx http-server 

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

 $ http-server -o --cors 

Para obtener más opciones, consulte la documentación http-server en GitHub , o ejecute:

 $ http-server --help 

Muchas otras características interesantes y una implementación sencilla para el cerebro en NodeJitsu.

Característica Forks

Por supuesto, puede completar fácilmente las funciones con su propio tenedor. Es posible que ya lo hayas hecho en una de las más de 800 horquillas existentes de este proyecto:

Light Server: una alternativa de actualización automática

Una buena alternativa al http-server es light-server . Es compatible con la visualización de archivos y la actualización automática y muchas otras funciones.

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

Agregar a su menú contextual de directorio en Windows Explorer

  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, json-server puede ser lo que está buscando.

Editores de actualización automática

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

El editor de texto de código abierto Brackets también incluye un servidor web estático NodeJS. Simplemente abra cualquier archivo HTML entre corchetes, presione ” Live Preview ” e inicia un servidor estático y abre 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 adaptables. Abra su página HTML en múltiples navegadores / tamaños de ventana / dispositivos. Guarde su página HTML y vea al instante si sus elementos adaptables funcionan, ya que todos se actualizan automáticamente.

Desarrolladores PhoneGap

Si está codificando una aplicación móvil híbrida , le puede interesar saber que el equipo de PhoneGap tomó este concepto de actualización automática a bordo con su nueva aplicación PhoneGap . Esta es una aplicación móvil genérica que puede cargar los archivos HTML5 de un servidor durante el desarrollo. Este es un truco muy astuto ya que ahora puede omitir los pasos lentos de comstackció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ía del tiempo. También proporcionan el servidor web estático NodeJS (ejecute phonegap serve ) que detecta cambios de archivos.

Desarrolladores PhoneGap + Sencha Touch

Ahora he adaptado ampliamente el servidor estático PhoneGap y la aplicación para desarrolladores PhoneGap para los desarrolladores de Sencha Touch y jQuery Mobile. Compruébalo en Sencha Touch Live . Admite códigos QR QR y un túnel de localización que envía un servidor estático desde su computadora de escritorio a una URL fuera del firewall. Toneladas de usos. Masiva aceleración para desarrolladores móviles híbridos.

Desarrolladores de Cordova + Ionic Framework

Las funciones del servidor local y la actualización automática se incorporan a la herramienta ionic . Simplemente ejecute el ionic serve desde su carpeta de aplicaciones. Mejor aún … ionic serve --lab para ver vistas automáticas de lado a lado de iOS y Android.

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

Node.JS servidor de archivos estáticos web. Ponlo en tu camino 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

Lo esencial maneja los archivos css y js. Lo he usado yo mismo. El uso de lectura / escritura en el 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 que se devuelve en la respuesta.

El problema con su código es que siempre devuelve un tipo de contenido de “texto / normal”. 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 inferir que está bien. Ningún tipo de contenido es mejor que uno incorrecto.

Normalmente, el tipo de contenido es una configuración de su servidor web. Entonces, lo siento si esto no resuelve su problema, pero funcionó para mí como un simple servidor de desarrollo 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 utilizar una biblioteca como Connect que tenga valores predeterminados razonables. Lo bueno de esto es que es simple y autónomo (sin dependencias).

Pero sí siento tu problema. Entonces 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"); 

No necesitas express. No necesitas conectarte Node.js hace http NATIVAMENTE. Todo lo que necesita hacer es devolver un archivo que depende 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 (eg readFileSync) }).listen(9615) 

Un ejemplo más completo que garantiza que las solicitudes no puedan acceder a los archivos que se encuentran debajo de un directorio base y que maneje correctamente el error:

 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) 

Creo que la parte que te estás perdiendo ahora es que estás enviando:

 Content-Type: text/plain 

Si desea que un navegador web represente el código HTML, debe cambiarlo a:

 Content-Type: text/html 

Paso 1 (dentro del símbolo del sistema [Espero que npm install express ]): 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 debe agregar WATCHFILE (o use nodemon) también. El código anterior es solo para un servidor de conexión simple.

PASO 3: node server.js o nodemon server.js

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

y abra nuestro directorio y escriba http-server

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

La manera más 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); 

En lugar de tratar con una statement 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'; 

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

 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.

No necesita usar ningún módulo de NPM para ejecutar un servidor simple, hay una biblioteca muy pequeña llamada ” NPM Free Server ” para Node:

  • Servidor libre de NPM en GitHub

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 funcionó. Menos de 1 KB de tamaño (minificado).

si tienes un nodo instalado en tu PC, probablemente tengas el NPM, si no necesitas cosas de NodeJS, puedes 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  d:> serve d:\StaticSite 

Le mostrará en qué puerto está siendo servida su carpeta estática, solo navegue al host como:

 http://localhost:3000 

Encontré una biblioteca interesante en npm que podría ser de alguna utilidad para ti. Se llama mime ( npm install mime o https://github.com/broofa/node-mime ) y puede determinar el tipo de mime de un archivo. Aquí hay un ejemplo de un servidor web que escribí al usarlo:

 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 la teoría debería funcionar para todo)

Notas del desarrollador

Aquí hay un ejemplo de resultados que obtuve con esto:

 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 función de unescape en la construcción de la ruta. Esto es para permitir nombres de archivos con espacios y caracteres codificados.

Editar:

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

paso 1

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

paso 2

  • crear un index.html y servirlo

paso 3

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

etapa 4

  • agregar jquery-1.4.2.js
  • agregar client.js
  • cambie index.html para pedirle al usuario su apodo

Aquí está el server.js

Aquí está el util.js

 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 representar en él, como:

  

Hello world

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

 npm install node-static -g 

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

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

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

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

Me pareció muy conveniente.

Actualizar

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

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

Instale serve-static primero.

Utilizo el código siguiente para iniciar un servidor web simple que rinde 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); 

Retraerá todos los archivos js, css e image, junto con todo el contenido html.

Acepte la statement ” Ningún tipo de contenido es mejor que uno incorrecto

No estoy seguro 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.

Una versión 4.x expresada un poco más detallada pero que proporciona listado de directorios, compresión, almacenamiento en caché y registro de solicitudes 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 !") 

Crazy cantidad de respuestas complicadas aquí. Si no tiene la intención de procesar los archivos / bases de datos de nodeJS, pero solo desea servir html / css / js / images estáticos, tal como lo sugiere su pregunta, simplemente instale el módulo pushstate-server o similar;

Aquí hay un “un trazador de líneas” que creará y lanzará un mini sitio. Simplemente pegue ese bloque completo en su terminal en el directorio apropiado.

 mkdir mysite; \ cd mysite; \ npm install pushstate-server --save; \ mkdir app; \ touch app/index.html; \ echo '

Hello World

' > 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 directorio de la app como la raíz para servir archivos. Para agregar activos adicionales solo colóquelos dentro de ese directorio.

 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' 

La mayoría de las respuestas anteriores describen muy bien cómo se sirven los contenidos. Lo que buscaba como adicional era el listado del directorio para que otros contenidos del directorio puedan ser examinados. 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)); 

Ya hay algunas excelentes soluciones para un nodejs server simple. Hay una solución más si necesita live-reloading medida que realiza cambios en sus archivos.

 npm install lite-server -g 

navega por tu directorio y hazlo

 lite-server 

abrirá el navegador para ti con la recarga en vivo.

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

 sudo npm install ripple-emulator -g 

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

 ripple emulate 

luego cambia el dispositivo al paisaje de Nexus 7.

La versión más simple que he encontrado es la siguiente. Para fines educativos, es lo 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.jpg debería estar en el mismo directorio que este archivo. Espero que esto ayude a alguien 🙂