Chargement du HTML de base dans Node.js

J'essaie de savoir comment charger et rendre un fichier HTML de base, donc je n'ai pas à écrire du code comme:

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

Je viens de trouver un moyen d'utiliser la bibliothèque fs . Je ne sais pas si c'est le plus propre.

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

Le concept de base est simplement la lecture de fichiers bruts et le vidage du contenu. Toujours ouvert à des options plus propres, cependant!

utilisez app.get pour obtenir le fichier html. c'est simple!!

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

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

c'est aussi simple que ça. Pour cela, utilisez le module express. Installez express:npm install express -g

Vous pouvez faire écho des fichiers manuellement en utilisant l'objet fs, mais je vous recommande d'utiliser le framework ExpressJS pour vous faciliter la vie.

... Mais si vous insistez pour le faire à la dure:

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

Je sais que c'est une vieille question, mais comme personne ne l'a mentionné, j'ai pensé qu'il valait la peine d'ajouter:

Si vous voulez littéralement diffuser du contenu statique (par exemple une page, une image, un CSS, etc.), vous pouvez utiliser l'un des modules de diffusion de contenu statique, par exemple node-static. (Il y en a d'autres qui peuvent être meilleurs / pires - essayez search.npmjs.org.) Avec un peu de prétraitement, vous pouvez ensuite filtrer les pages dynamiques de statiques et les envoyer au bon gestionnaire de requêtes.

Ce serait probablement quelque chose de mieux puisque vous allez diffuser le ou les fichiers plutôt que de les charger tous en mémoire comme 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);

Ceci est une mise à jour de la réponse de Muhammed Neswine

Dans Express 4.x, sendfile est obsolète et la fonction sendFile doit être utilisée. La différence est que sendfile prend un chemin relatif et sendFile prend un chemin absolu. Ainsi, __dirname est utilisé pour éviter de coder en dur le chemin.

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

C'est une manière plus flexible et simple d'utiliser la pipeméthode.

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 meilleure façon que j'ai apprise est d'utiliser express avec des fichiers html car express donne beaucoup d'avantages. Vous pouvez également l'étendre à une plate-forme Heroku si vous le souhaitez.

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

Propre et meilleur .. !!!

Le moyen le plus simple est de mettre tous vos fichiers, y compris index.html ou quelque chose avec toutes les ressources telles que CSS, JS, etc. dans un dossier public ou vous pouvez le nommer comme vous voulez et maintenant vous pouvez utiliser express js et simplement dire à l'application d'utiliser le _dirname comme:

Dans votre server.js utilisant express ajoutez ces

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

et si vous voulez que le répertoire séparé ajoute un nouveau répertoire sous le répertoire public et utilisez ce chemin "/ public / YourDirName"

Alors qu'est-ce que nous faisons ici exactement? nous créons une instance express nommée app et nous donnons l'adresse si le répertoire public pour accéder à toutes les ressources. J'espère que cela t'aides !

Que diriez-vous d'utiliser le module express?

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

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

    app.listen('8000');

ensuite, vous pouvez utiliser le navigateur pour obtenir / 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 ");

C'est vraiment simple si vous utilisez un tuyau. Voici l'extrait de code 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...');

Je pense que ce serait une meilleure option car elle montre l'URL exécutant le serveur:

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

Vous pouvez également utiliser cet extrait:

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

Je sais que c'est une vieille question - voici un simple utilitaire de serveur de fichiers si vous préférez ne pas utiliser connect ou express; mais plutôt le module 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')
         }  
    })
}

utilisez ejs au lieu 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' });};

C'est une assez vieille question ... mais si votre cas d'utilisation ici est d'envoyer simplement une page HTML particulière au navigateur sur une base ad hoc, j'utiliserais quelque chose de simple comme ceci:

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

nous pouvons charger le document html avec le travail du cadre de connexion. J'ai placé mon document html et les images associées dans le dossier public de mon projet où le code ci-dessous et les modules de nœuds sont présents.

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

J'ai essayé la méthode readFile () de fs, mais elle ne parvient pas à charger les images, c'est pourquoi j'ai utilisé le cadre de connexion.

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

Voici mes codes de démonstration simples pour héberger des fichiers HTML statiques en utilisant le serveur Express!

j'espère que cela vous aide!

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