Carregando HTML básico no Node.js

Estou tentando descobrir como carregar e renderizar um arquivo HTML básico para não precisar escrever código como:

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

Acabei de encontrar uma maneira de usar a biblioteca fs . Não tenho certeza se é o mais limpo.

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

O conceito básico é apenas ler arquivos brutos e despejar o conteúdo. Ainda está aberto a opções mais limpas!

use app.get para obter o arquivo html. é simples!!

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

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

É simples assim. Para isso, use o módulo express. Instale express:npm install express -g

Você pode ecoar arquivos manualmente usando o objeto fs, mas eu recomendo o uso da estrutura ExpressJS para facilitar sua vida.

... Mas se você insistir em fazer da maneira mais 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);

Sei que essa é uma pergunta antiga, mas como ninguém a mencionou, pensei que valeria a pena acrescentar:

Se você quiser literalmente veicular conteúdo estático (por exemplo, uma página 'sobre', imagem, css, etc.), poderá usar um dos módulos de veiculação de conteúdo estático, por exemplo, estático do nó. (Existem outros que podem ser melhores / piores - tente search.npmjs.org.) Com um pouco de pré-processamento, você pode filtrar as páginas dinâmicas da estática e enviá-las ao manipulador de solicitações certo.

Provavelmente, isso seria um pouco melhor, pois você fará o streaming do (s) arquivo (s) em vez de carregar tudo na memória 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 é uma atualização da resposta de Muhammed Neswine

No Express 4.x, o sendfile foi descontinuado e a função sendFile deve ser usada. A diferença é que sendfile usa o caminho relativo e sendFile usa o caminho absoluto. Portanto, __dirname é usado para evitar a codificação do caminho.

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

É a maneira mais flexível e simples de usar o 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...');

A melhor maneira que aprendi é usar o express com arquivos html, pois o express oferece muitas vantagens. Além disso, você pode estendê-lo para uma plataforma Heroku, se quiser ... Basta dizer :)

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

Limpo e melhor .. !!!

A maneira mais fácil de fazer é colocar todos os seus arquivos, incluindo index.html ou algo com todos os recursos, como CSS, JS etc., em uma pasta public ou você pode nomear o que quiser e agora pode usar js express e apenas informar ao app para usar o _dirname como:

No server.js usando express, adicione estes

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

e se você quiser ter um diretório separado, adicione um novo diretório no diretório público e use esse caminho "/ public / YourDirName"

Então, o que estamos fazendo aqui exatamente? estamos criando uma instância expressa chamada app e estamos dando o endereço se o diretório público acessar todos os recursos. Espero que isto ajude !

Que tal usar o módulo expresso?

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

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

    app.listen('8000');

então, você pode usar o navegador para obter / 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 ");

Eu acho que essa seria uma opção melhor, pois mostra a URL executando o 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}/`);
        })
}); 

Você também pode usar este trecho:

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

É muito simples se você usar cachimbo. A seguir está o trecho 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...');

Sei que essa é uma pergunta antiga - aqui está um utilitário de servidor de arquivos simples, se você preferir não usar o connect ou express; mas sim o 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')
         }  
    })
}

use ejs em vez 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 é uma pergunta bastante antiga ... mas se o seu caso de uso aqui for simplesmente enviar uma página HTML específica para o navegador em uma base ad hoc, eu usaria algo simples 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);

podemos carregar o documento html com o trabalho de conexão de quadros. Coloquei meu documento html e as imagens relacionadas na pasta pública do meu projeto, onde os módulos de código e nó abaixo estão presentes.

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

Eu tentei o método readFile () do fs, mas ele falha ao carregar as imagens, é por isso que usei a estrutura de conexão.

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

Aqui estão meus códigos de demonstração simples para hospedar arquivos HTML estáticos usando o servidor Express!

espero que ajude para você!

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