web-dev-qa-db-fra.com

Chargement du code HTML de base dans Node.js

Juste une simple question de Noeud.js noob ici. J'essaie de savoir comment charger et "afficher" un fichier HTML de base afin de ne pas écrire de code comme response.write('...<p>blahblahblah</p>...');.

htmlnode.js
181
David Granado

Je viens de trouver le chemin one en utilisant 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 consiste simplement à lire un fichier brut et à vider son contenu. Toujours ouvert aux options plus propres, cependant!

217
David Granado

Vous pouvez faire écho des fichiers manuellement à l'aide de l'objet fs, mais je vous conseillerais d'utiliser le framework ExpressJS pour vous simplifier 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);
36
Stephen

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

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

34
Muhammed Neswine

Je sais que c'est une vieille question, mais comme personne ne l'a mentionnée, j'ai pensé que cela valait la peine d'être ajouté:

Si vous voulez littéralement servir du contenu statique (par exemple une page 'à propos', une image, un css, etc.), vous pouvez utiliser l'un des modules de service de contenu statique, par exemple node-static. (Il y en a d'autres qui pourraient être meilleures/pires - essayez search.npmjs.org.) Avec un peu de prétraitement, vous pouvez alors filtrer les pages dynamiques en statique et les envoyer au bon gestionnaire de demandes.

21
Paul

Ce serait probablement mieux, car vous allez transférer le (s) fichier (s) plutôt que de tout charger 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);
18
user2428926

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 le chemin relatif et sendFile prend le chemin absolu. Donc, __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'));
});
11
Mit Mehta

C'est un moyen plus souple et plus simple d'utiliser la méthode 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...');
9
Devsullo

La meilleure façon que j'ai apprise est d'utiliser Express avec des fichiers HTML, car Express donne de nombreux avantages. Vous pouvez également l’étendre sur 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 .. !!!

8
Kaushik Ray

Le moyen le plus simple de le faire est de placer tous vos fichiers, y compris index.html ou quelque chose avec toutes les ressources telles que CSS, JS, etc. dans un dossier public. utiliser le _dirname comme:

Dans votre server.js en 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 seprate ajoute un nouveau répertoire sous le répertoire public et utilise ce chemin "/ public/YourDirName"

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

6
Muaaz salagar

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

alors, vous pouvez utiliser le navigateur pour obtenir/localhost: 8000

5
李杰駿

Je pense que ce serait une meilleure option car elle affiche 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}/`);
        })
});
4
sghazagh
   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 ");
3
Siddharth Shukla

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' });};
2
Saurabh Chandra Patel

Vous pouvez également utiliser cet extrait:

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

Je sais que c’est une vieille question - voici un utilitaire de serveur de fichiers simple 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')
         }  
    })
}
2
user548

C'est une question assez ancienne ... mais si votre cas d'utilisation ici consiste simplement à envoyer une page HTML particulière au navigateur de manière 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);
1
granmoe

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

Voici mes codes de démonstration simples pour les fichiers HTML statiques Host en utilisant Express Server!

_ {j'espère que cela vous aidera!} _

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

0
xgqfrms

nous pouvons charger le document html avec Connect Frame Work. J'ai placé mon document html et les images associées dans le dossier public de mon projet où se trouvent les modules de code et de noeud ci-dessous.

//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 les images ne sont pas chargées, c'est pourquoi j'ai utilisé le framework connect.

0
Nagaraju Chilakalapudi