Завантаження основного HTML у Node.js

Я намагаюся дізнатися, як завантажити та відтворити основний HTML-файл, щоб не потрібно писати код на зразок:

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

Я просто знайшов один із способів використання бібліотеки fs . Я не впевнений, чи це найчистіше.

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

Основна концепція - це просто читання файлів із сировини та скидання вмісту. Досі відкриті для чистіших варіантів, хоча!

використовуйте app.get, щоб отримати файл HTML. це просто!!

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

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

це так просто, як це. Для цього використовуйте експрес-модуль. Встановити експрес:npm install express -g

Ви можете повторювати файли вручну за допомогою об'єкта fs, але я рекомендую використовувати рамку ExpressJS, щоб зробити ваше життя набагато простішим.

... Але якщо ви наполягаєте на тому, щоб зробити це важким способом:

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

Я знаю, що це давнє запитання, але оскільки ніхто цього не згадував, я вважав, що варто додати:

Якщо ви буквально хочете подавати статичний контент (скажімо, "про" сторінку, зображення, css тощо), ви можете використовувати один із модулів, що обслуговують статичний вміст, наприклад, вузол-статичний. (Є й інші, що можуть бути кращими / гіршими - спробуйте search.npmjs.org.) За допомогою невеликої попередньої обробки ви зможете відфільтрувати динамічні сторінки зі статичних даних та надіслати їх правильному оброблювачу запиту.

Напевно, це буде щось краще, оскільки ви будете потоково передавати файли (файли), а не завантажувати їх у пам'ять, як 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);

Це оновлення відповіді Мухаммеда Несвіна

У Express 4.x sendfile було застарілим, і функція sendFile повинна бути використана. Різниця в sendfile приймає відносний шлях, а sendFile приймає абсолютний шлях. Отже, __dirname використовується для уникнення жорсткого кодування шляху.

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

Це більш гнучкий і простий спосіб використання 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...');

Найкращий спосіб, який я навчився, - це використання Express з HTML-файлами, оскільки express дає велику перевагу. Крім того, ви можете розширити його на платформу Heroku, якщо хочете .. Просто сказати :)

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

Чисте і найкраще .. !!!

Простий спосіб зробити це - помістити всі файли, включаючи index.html або щось із усіма ресурсами, такими як CSS, JS тощо, у загальнодоступну папку, або ви можете назвати його все, що завгодно, і тепер ви можете використовувати Express js та просто розповісти додаток використовувати _dirname як:

У вашому сервері.js за допомогою експресу додайте ці

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

і якщо ви хочете мати окремий каталог, додайте новий dir під загальнодоступний каталог та використовуйте цей шлях "/ public / YourDirName"

Так що ми саме тут робимо? ми створюємо експрес-примірник з назвою додаток, і ми надаємо адресу, якщо публічний каталог отримує доступ до всіх ресурсів. Сподіваюсь, це допомагає!

Як щодо використання експрес-модуля?

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

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

    app.listen('8000');

тоді ви можете скористатися браузером для отримання / 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 ");

Я думаю, що це буде кращим варіантом, оскільки він показує URL, на якому працює сервер:

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

Ви також можете використовувати цей фрагмент:

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

Це просто дуже просто, якщо ви використовуєте трубу. Далі наведено фрагмент коду 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...');

Я знаю, що це старе питання - ось проста утиліта файлового сервера, якщо ви не хочете використовувати підключення чи експрес; а швидше модуль 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')
         }  
    })
}

використовувати ejs замість нефриту

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

Це досить давнє запитання ... але якщо вашим випадком використання є просто надіслати певну сторінку HTML у веб-переглядачі на спеціальній основі, я б використав щось таке, як це:

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

ми можемо завантажити HTML-документ із роботою підключення кадру. Я розмістив свій html-документ та пов’язані з ним зображення у загальнодоступній папці мого проекту, де присутні нижче модулі коду та вузла.

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

Я спробував метод readFile () fs, але він не вдається завантажити зображення, тому я використав рамку підключення.

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

Ось мій простий демонстраційний код для статичних HTML-файлів хоста за допомогою сервера Express!

сподіваюся, що це допоможе вам!

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