Cargando HTML básico en Node.js

Estoy tratando de averiguar cómo cargar y renderizar un archivo HTML básico para no tener que escribir código como:

response.write('...<p>blahblahblah</p>...');

Acabo de encontrar una manera de usar la biblioteca fs . Sin embargo, no estoy seguro de si es el más limpio.

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


fs.readFile('./index.html', function (err, html) {
    if (err) {
        throw err; 
    }       
    http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(8000);
});

El concepto básico es solo leer archivos sin procesar y descargar los contenidos. Sin embargo, todavía estoy abierto a opciones más limpias.

use app.get para obtener el archivo html. ¡¡es sencillo!!

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

app.get('/', function(request, response){
    response.sendFile('absolutePathToYour/htmlPage.html');
});

Es tan simple como eso. Para esto utiliza el módulo express. Instalar express:npm install express -g

Puede hacer eco de archivos manualmente usando el objeto fs, pero le recomiendo usar el framework ExpressJS para hacer su vida mucho más fácil.

... Pero si insistes en hacerlo de la manera difícil:

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

http.createServer(function(req, res){
    fs.readFile('test.html',function (err, data){
        res.writeHead(200, {'Content-Type': 'text/html','Content-Length':data.length});
        res.write(data);
        res.end();
    });
}).listen(8000);

Sé que esta es una vieja pregunta, pero como nadie la ha mencionado, pensé que valía la pena agregarla:

Si literalmente quiere servir contenido estático (digamos una página 'acerca de', imagen, css, etc.) puede usar uno de los módulos de servicio de contenido estático, por ejemplo, nodo-estático. (Hay otros que pueden ser mejores / peores, intente search.npmjs.org.) Con un poco de preprocesamiento, puede filtrar las páginas dinámicas de la estática y enviarlas al controlador de solicitudes correcto.

Probablemente esto sea mejor, ya que transmitirá los archivos en lugar de cargarlos en la memoria como fs.readFile.

var http = require('http');
var fs = require('fs');
var path = require('path');
var ext = /[\w\d_-]+\.[\w\d]+$/;

http.createServer(function(req, res){
    if (req.url === '/') {
        res.writeHead(200, {'Content-Type': 'text/html'});
        fs.createReadStream('index.html').pipe(res);
    } else if (ext.test(req.url)) {
        fs.exists(path.join(__dirname, req.url), function (exists) {
            if (exists) {
                res.writeHead(200, {'Content-Type': 'text/html'});
                fs.createReadStream('index.html').pipe(res);
            } else {
                res.writeHead(404, {'Content-Type': 'text/html'});
                fs.createReadStream('404.html').pipe(res);
        });
    } else {
        //  add a RESTful service
    }
}).listen(8000);

Esta es una actualización de la respuesta de Muhammed Neswine

En Express 4.x, sendfile ha quedado en desuso y se debe utilizar la función sendFile . La diferencia es que sendfile toma la ruta relativa y sendFile toma la ruta absoluta. Entonces, __dirname se usa para evitar codificar la ruta.

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

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

Es una forma más flexible y sencilla de usar el pipemétodo.

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

http.createServer(function(request, response) {
  response.writeHead(200, {'Content-Type': 'text/html'});

  var file = fs.createReadStream('index.html');
  file.pipe(response);

}).listen(8080);

console.log('listening on port 8080...');

La mejor manera que aprendí es usar express con archivos html, ya que express ofrece muchas ventajas. También puede extenderlo a una plataforma Heroku si lo desea ... Solo diciendo :)

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(3000);



console.log("Running at Port 3000");

Limpio y mejor ... !!!

La forma fácil de hacerlo es colocar todos sus archivos, incluido index.html o algo con todos los recursos como CSS, JS, etc. en una carpeta pública o puede nombrarlo como desee y ahora puede usar express js y simplemente decirle a la aplicación usar el _dirname como:

En su server.js usando express agregue estos

var express = require('express');
var app = express();
app.use(express.static(__dirname + '/public'));

y si desea tener un directorio separado, agregue un nuevo directorio en el directorio público y use esa ruta "/ public / YourDirName"

Entonces, ¿qué estamos haciendo aquí exactamente? estamos creando una instancia expresa llamada aplicación y estamos dando la dirección del directorio público para acceder a todos los recursos. Espero que esto ayude !

¿Qué tal el uso del módulo express?

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

    app.get('/',function(request,response){
       response.sendFile(__dirname+'/XXX.html');
    });

    app.listen('8000');

entonces, puede usar el navegador para obtener / localhost: 8000

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

  http.createServer(function(request, response) {  
    response.writeHeader(200, {"Content-Type": "text/html"});  
    var readSream = fs.createReadStream('index.html','utf8')
    readSream.pipe(response);
  }).listen(3000);

 console.log("server is running on port number ");

Creo que esta sería una mejor opción, ya que muestra la URL que ejecuta el servidor:

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

const hostname = '<your_machine_IP>';
const port = 3000;

const html=fs.readFile('./index.html', function (err, html) {
    if (err) {
        throw err; 
    }
        http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(port, hostname, () => {
            console.log(`Server running at http://${hostname}:${port}/`);
        })
}); 

También puedes usar este fragmento:

var app = require("express");
app.get('/', function(req,res){
   res.sendFile(__dirname+'./dir/yourfile.html')
});
app.listen(3000);

Es realmente simple si usas tubería. El siguiente es el fragmento de código server.js.

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

function onRequest(req, res){

    console.log("USER MADE A REQUEST. " +req.url);
    res.writeHead(200, {'Content-Type': 'text/html'});
    var readStream = fs.createReadStream(__dirname + '/index.html','utf8'); 
    
/*include your html file and directory name instead of <<__dirname + '/index.html'>>*/

    readStream.pipe(res);

}

http.createServer(onRequest).listen(7000);
console.log('Web Server is running...');

Sé que esta es una vieja pregunta: aquí hay una sencilla utilidad de servidor de archivos si prefiere no usar connect o express; sino más bien el módulo http.

var fileServer = require('./fileServer');
var http = require('http');
http.createServer(function(req, res) {
   var file = __dirname + req.url;
   if(req.url === '/') {
       // serve index.html on root 
       file = __dirname + 'index.html'
   }
   // serve all other files echoed by index.html e.g. style.css
   // callback is optional
   fileServer(file, req, res, callback);

})
module.exports = function(file, req, res, callback) {
    var fs = require('fs')
        , ext = require('path').extname(file)
        , type = ''
        , fileExtensions = {
            'html':'text/html',
            'css':'text/css',
            'js':'text/javascript',
            'json':'application/json',
            'png':'image/png',
            'jpg':'image/jpg',
            'wav':'audio/wav'
        }
    console.log('req    '+req.url)
    for(var i in fileExtensions) {
       if(ext === i) {    
          type = fileExtensions[i]
          break
       }
    }
    fs.exists(file, function(exists) {
       if(exists) {
          res.writeHead(200, { 'Content-Type': type })
          fs.createReadStream(file).pipe(res)
          console.log('served  '+req.url)
          if(callback !== undefined) callback()
       } else {
          console.log(file,'file dne')
         }  
    })
}

usar ejs en lugar de jade

npm install ejs

app.js

app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

./routes/index.js

exports.index = function(req, res){
res.render('index', { title: 'ejs' });};

Esta es una pregunta bastante antigua ... pero si su caso de uso aquí es simplemente enviar una página HTML particular al navegador de manera ad hoc, usaría algo simple como esto:

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

var server = http.createServer(function(req, res){
  var stream = fs.createReadStream('test.html');
  stream.pipe(res);
});
server.listen(7000);

podemos cargar el documento html con el marco de trabajo de conexión. He colocado mi documento html y las imágenes relacionadas en la carpeta pública de mi proyecto donde se encuentran los siguientes módulos de código y nodo.

//server.js
var http=require('http');
var connect=require('connect');

var app = connect()
  .use(connect.logger('dev'))
  .use(connect.static('public'))
  .use(function(req, res){
   res.end('hello world\n');
 })

http.createServer(app).listen(3000);

He probado el método readFile () de fs, pero no puede cargar las imágenes, por eso he usado el marco de conexión.

https://gist.github.com/xgqfrms-GitHub/7697d5975bdffe8d474ac19ef906e906

¡Aquí están mis códigos de demostración simples para los archivos HTML estáticos del host usando el servidor Express!

Espero que te ayude!

// simple express server for HTML pages!
// ES6 style

const express = require('express');
const fs = require('fs');
const hostname = '127.0.0.1';
const port = 3000;
const app = express();

let cache = [];// Array is OK!
cache[0] = fs.readFileSync( __dirname + '/index.html');
cache[1] = fs.readFileSync( __dirname + '/views/testview.html');

app.get('/', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[0] );
});

app.get('/test', (req, res) => {
    res.setHeader('Content-Type', 'text/html');
    res.send( cache[1] );
});

app.listen(port, () => {
    console.log(`
        Server is running at http://${hostname}:${port}/ 
        Server hostname ${hostname} is listening on port ${port}!
    `);
});