Cargando HTML básico en Node.js

Question

Solo una pregunta simple Node.js aquí. Estoy tratando de averiguar cómo cargar y "mostrar" un archivo HTML básico para no tener que escribir código como response.write(''...<p>blahblahblah</p>...''); .

Answer 1

¿Qué hay de usar el módulo express?

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

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

    app.listen(''8000'');

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

Answer 2

Acabo de encontrar una forma de usar la biblioteca fs . 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 lectura de archivos brutos y volcado de contenidos. ¡Sin embargo, todavía estamos abiertos a opciones más limpias!

Answer 3

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}/`);
        })
}); 

Answer 4

Es una forma más flexible y simple de usar el método de pipe .

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...'');

Answer 5

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

En Express 4.x, sendfile ha quedado en desuso y se debe usar la función sendFile . La diferencia es que sendfile toma la ruta relativa y sendFile toma la ruta absoluta. Por lo tanto, __dirname se usa para evitar la codificación de 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''));
});

Answer 6

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

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

Answer 7

Esto probablemente sea algo mejor, ya que estará transmitiendo 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);

Answer 8

La forma más fácil de hacerlo es poner todos sus archivos, incluyendo index.html o algo así, con todos los recursos, como CSS, JS, etc. en una carpeta pública o puede ponerle el nombre que desee y ahora puede usar express js y simplemente contar la aplicación para 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 quieres tener un directorio seprate agrega un nuevo directorio bajo el directorio público y usa esa ruta "/ public / YourDirName"

Entonces, ¿qué estamos haciendo aquí exactamente? estamos creando aplicaciones de nombre expreso y estamos dando la dirección si el directorio público para acceder a todos los recursos. Espero que esto ayude !

Answer 9

La mejor forma que aprendí es usar Express con archivos html, ya que el sistema express brinda muchas ventajas. También puedes extenderlo a una plataforma Heroku si quieres ... Solo digo :)

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 .. !!!

Answer 10

Puedes hacer eco de los archivos manualmente usando el objeto fs, pero te recomendaría usar el marco ExpressJS para que tu vida sea mucho más fácil.

... Pero si insiste 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);

Answer 11

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

Si, literalmente, desea publicar contenido estático (por ejemplo, una página "sobre", una imagen, un archivo 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 - pruebe search.npmjs.org.) Con un poco de preprocesamiento, puede filtrar páginas dinámicas desde estática y enviarlas al controlador de solicitudes correcto.

Answer 12

Sé que esta es una vieja pregunta: aquí hay una utilidad de servidor de archivos simple si prefieres 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'')
         }  
    })
}

Answer 13

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

//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 intentado el método readFile () de fs, pero no puede cargar las imágenes, es por eso que he usado el marco connect.

Answer 14

usa 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'' });};

Answer 15

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(''yourhtmlpagename.html'');
});

Es tan simple como eso. Para este uso express modulo. Instalar express: npm install express -g

Answer 16

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

Aquí están mis simples códigos de demostración 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}!
    `);
});

Answer 17

   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 ");