Quiero ejecutar un servidor HTTP muy simple. Cada solicitud GET example.com
debe ser index.html
atendida, 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 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 get
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?
Respuestas:
El servidor más simple de Node.js es solo:
Ahora puede ejecutar un servidor mediante los siguientes comandos:
Si está utilizando NPM 5.2.0 o posterior, puede usarlo
http-server
sin instalarlonpx
. No se recomienda su uso en producción, pero es una excelente manera de hacer que un servidor se ejecute rápidamente en localhost.O bien, puede intentar esto, que abre su navegador web y habilita las solicitudes CORS:
Para obtener más opciones, consulte la documentación de
http-server
GitHub o ejecute: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-server
eslight-server
. Admite la visualización de archivos y la actualización automática y muchas otras funciones.Agregar al menú contextual del directorio en el Explorador de Windows
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
ionic
herramienta. Simplemente ejecuteionic serve
desde la carpeta de su aplicación. Aún mejor ...ionic serve --lab
para ver las vistas de actualización automática de lado a lado de iOS y Android.fuente
npm install live-server -g
si desea lo mismo, pero con recarga automática cuando detecta un cambio de archivohttp-server -a localhost
Puede usar Connect y ServeStatic con Node.js para esto:
Instalar connect y serve-static con NPM
Cree un archivo server.js con este contenido:
Ejecutar con Node.js
Ahora puedes ir a
http://localhost:8080/yourfile.html
fuente
Mira esta esencia . Lo estoy reproduciendo aquí como referencia, pero la esencia se ha actualizado regularmente.
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.
fuente
fs.exists()
ahora también está en desuso. Captura el error enfs.stat()
lugar de crear una condición de carrera.No necesitas expreso. No necesitas conectarte. Node.js hace http NATIVELY. Todo lo que necesita hacer es devolver un archivo dependiente de la solicitud:
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:
fuente
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.Creo que la parte que te estás perdiendo en este momento es que estás enviando:
Si desea que un navegador web represente el HTML, debe cambiar esto a:
fuente
<style>
etiqueta.Paso 1 (dentro del símbolo del sistema [Espero que cd A SU CARPETA]):
npm install express
Paso 2: crea un archivo server.js
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
fuente
La manera rápida:
A tu manera:
fuente
En lugar de tratar con una declaración de cambio, creo que es mejor buscar el tipo de contenido de un diccionario:
fuente
Esta es básicamente una versión actualizada de la respuesta aceptada para conectar la versión 3:
También agregué una opción predeterminada para que index.html se sirva como predeterminado.
fuente
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).
fuente
var filename = path.join(process.cwd() + '/dist/', uri);
en el servidor desde la carpeta dist . Puse el códigoserver.js
y simplemente funciona cuando escribonpm start
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:
2 - Sirve tu carpeta estática:
Le mostrará en qué puerto se está sirviendo su carpeta estática, solo navegue hasta el host como:
fuente
Encontré una biblioteca interesante en npm que podría serle útil. Se llama mime (
npm install mime
o 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: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:
Observe la
unescape
función en la construcción del camino. Esto es para permitir nombres de archivos con espacios y caracteres codificados.fuente
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.
Aquí está el server.js
Aquí está el util.js
fuente
.readFileSync
en una devolución de llamada. Con node.js usamos IO sin bloqueo. Por favor no recomiendeSync
comandos.La forma en que lo hago es, en primer lugar, instalar el servidor estático de nodo globalmente a través de
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"
.fuente
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:
fuente
Básicamente copiando la respuesta aceptada, pero evitando crear un archivo js.
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:
Instalar
serve-static
primero.fuente
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
http: // localhost: 8080 / file.html
servirá file.html desde el disco
fuente
Puedes escribirlos en tu shell
Repo: https://github.com/zeit/serve .
fuente
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.
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 "
fuente
No estoy seguro de si esto es exactamente lo que quería, sin embargo, puede intentar cambiar:
a esto:
Esto hará que el cliente del navegador muestre el archivo como html en lugar de texto sin formato.
fuente
fuente
Content-Type
debería sertext/html
, ya que se define de esta manera:Content-Type := type "/" subtype *[";" parameter]
.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
fuente
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.
Abra el navegador y vaya a http: // localhost: 3000 . Hecho.
El servidor usará el
app
directorio como la raíz para servir archivos. Para agregar activos adicionales simplemente colóquelos dentro de ese directorio.fuente
npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Ya hay algunas grandes soluciones para un simple
nodejs server
. Hay una solución más si la necesitalive-reloading
mientras realiza cambios en sus archivos.navegar su directorio y hacer
te abrirá el navegador con la recarga en vivo.
fuente
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:
Lea más aquí: https://expressjs.com/en/api.html#res.sendFile
Un pequeño ejemplo con el servidor web express para el nodo:
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:
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:
Observe la ruta relativa en href!
voila!
fuente
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:
fuente
Esta es una de las soluciones más rápidas que uso para ver rápidamente páginas web
A partir de entonces solo ingrese el directorio de sus archivos html y ejecute
luego cambie el dispositivo a Nexus 7 horizontal.
fuente
La versión más simple que he encontrado es la siguiente. Para fines educativos, es mejor, ya que no utiliza ninguna biblioteca abstracta.
Ahora ve al navegador y abre lo siguiente:
Aquí
image.jpg
debe estar en el mismo directorio que este archivo. Espero que esto ayude a alguien :)fuente
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:
fuente
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:
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)
fuente