Memuat HTML dasar di Node.js

Saya mencoba mencari tahu cara memuat dan merender file HTML dasar sehingga saya tidak perlu menulis kode seperti:

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

Saya baru saja menemukan satu cara menggunakan perpustakaan fs . Saya tidak yakin apakah itu yang terbersih sekalipun.

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

Konsep dasarnya hanya membaca file mentah dan membuang konten. Masih terbuka untuk opsi yang lebih bersih!

gunakan app.get untuk mendapatkan file html. itu mudah!!

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

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

sesederhana itu. Untuk ini gunakan modul kilat. Instal ekspres:npm install express -g

Anda dapat menggema file secara manual menggunakan objek fs, tetapi saya akan merekomendasikan menggunakan kerangka ExpressJS untuk membuat hidup Anda lebih mudah.

... Tetapi jika Anda bersikeras melakukannya dengan cara yang sulit:

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

Saya tahu ini adalah pertanyaan lama, tetapi karena tidak ada yang menyebutkannya, saya pikir ini layak untuk ditambahkan:

Jika Anda benar-benar ingin menayangkan konten statis (misalnya halaman 'tentang', gambar, css, dll.) Anda dapat menggunakan salah satu modul penyajian konten statis, misalnya simpul-statis. (Ada yang lain yang mungkin lebih baik / lebih buruk - coba cari.npmjs.org.) Dengan sedikit pra-pemrosesan Anda kemudian dapat menyaring halaman dinamis dari statis dan mengirimkannya ke penangan permintaan yang benar.

Ini mungkin akan menjadi sesuatu yang lebih baik karena Anda akan streaming file (s) daripada memuat semuanya ke dalam memori seperti 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);

Ini adalah pembaruan untuk jawaban Muhammed Neswine

Di Express 4.x, sendfile telah ditinggalkan dan fungsi sendFile harus digunakan. Perbedaannya adalah sendfile mengambil jalur relatif dan sendFile mengambil jalur absolut. Jadi, __dirname digunakan untuk menghindari hardcoding path.

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

Ini cara yang lebih fleksibel dan sederhana untuk menggunakan pipemetode.

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

Cara terbaik yang saya pelajari adalah menggunakan express dengan file html karena express memberikan banyak keuntungan. Anda juga dapat memperluasnya ke platform Heroku jika Anda mau .. Hanya mengatakan :)

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

Bersih dan terbaik .. !!!

Cara mudah untuk melakukannya adalah, letakkan semua file Anda termasuk index.html atau sesuatu dengan semua sumber daya seperti CSS, JS dll di folder publik atau Anda dapat menamainya apa pun yang Anda inginkan dan sekarang Anda dapat menggunakan js ekspres dan hanya memberi tahu aplikasi untuk menggunakan _dirname sebagai:

Di server.js Anda menggunakan express tambahkan ini

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

dan jika Anda ingin memiliki direktori seprate tambahkan dir baru di bawah direktori publik dan gunakan jalur itu "/ public / YourDirName"

Jadi, sebenarnya apa yang kita lakukan di sini? kami membuat aplikasi bernama instance express dan kami memberikan alamat jika direktori publik untuk mengakses semua sumber daya. Semoga ini membantu !

Bagaimana kalau menggunakan modul kilat?

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

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

    app.listen('8000');

lalu, Anda dapat menggunakan browser untuk mendapatkan / 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 ");

Saya pikir ini akan menjadi pilihan yang lebih baik karena menampilkan URL yang menjalankan server:

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

Anda juga dapat menggunakan potongan ini:

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

Ini sangat sederhana jika Anda menggunakan pipa. Berikut ini adalah cuplikan kode 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...');

Saya tahu ini adalah pertanyaan lama - ini adalah utilitas server file sederhana jika Anda memilih untuk tidak menggunakan koneksi atau express; melainkan modul 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')
         }  
    })
}

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

Ini adalah pertanyaan yang cukup lama ... tetapi jika use case Anda di sini adalah dengan hanya mengirim halaman HTML tertentu ke browser secara ad hoc, saya akan menggunakan sesuatu yang sederhana seperti ini:

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

kita dapat memuat dokumen html dengan kerja bingkai koneksi. Saya telah meletakkan dokumen html saya dan gambar terkait di folder publik proyek saya di mana kode di bawah ini dan modul simpul ada.

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

Saya telah mencoba metode readFile () dari fs, tetapi gagal memuat gambar, itu sebabnya saya telah menggunakan kerangka koneksi.

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

Ini kode demo sederhana saya untuk meng-host file HTML statis dengan menggunakan server Express!

semoga ini membantu anda!

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