with - Utilizzo di node.js come semplice server Web




var http require(' http ') (18)

Voglio eseguire un server HTTP molto semplice. Ogni richiesta GET a example.com dovrebbe essere index.html ma come una normale pagina HTML (vale a dire, la stessa esperienza di quando leggi le normali pagine web).

Usando il codice qui sotto, posso leggere il contenuto di index.html . Come faccio a servire index.html come una normale pagina web?

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end(index);
}).listen(9615);

Un suggerimento sotto è complicato e mi richiede di scrivere una linea get per ogni risorsa (CSS, JavaScript, immagini) che voglio usare.

Come posso pubblicare una singola pagina HTML con alcune immagini, CSS e JavaScript?


Modificare:

App di esempio Node.js La chat di nodo ha la funzionalità che desideri.
Nel suo file README.textfile
3. Step è ciò che stai cercando.

passo 1

  • crea un server che risponde con Hello World sulla porta 8002

passo 2

  • crea un index.html e servilo

step3

  • presenta util.js
  • cambia la logica in modo che venga servito qualsiasi file statico
  • mostra 404 nel caso non sia stato trovato alcun file

step4

  • aggiungi jquery-1.4.2.js
  • aggiungi client.js
  • cambia index.html per richiedere all'utente il nickname

Ecco il server.js

Ecco il file util.js


È possibile utilizzare Connect e ServeStatic con Node.js per questo:

  1. Installa connect e serve-static con NPM

    $ npm install connect serve-static
    
  2. Crea il file server.js con questo contenuto:

    var connect = require('connect');
    var serveStatic = require('serve-static');
    connect().use(serveStatic(__dirname)).listen(8080, function(){
        console.log('Server running on 8080...');
    });
    
  3. Esegui con Node.js

    $ node server.js
    

Ora puoi andare a http://localhost:8080/yourfile.html


Esistono già alcune ottime soluzioni per un semplice nodejs server . Esiste un'altra soluzione se è necessario il live-reloading quando si apportano modifiche ai file.

npm install lite-server -g

navigare nella directory e fare

lite-server

aprirà il browser per te con il live-ricaricamento.


Fondamentalmente copia la risposta accettata, ma evitando di creare un file js.

$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);

Ho trovato molto comodo.

Aggiornare

A partire dall'ultima versione di Express, serve-static è diventato un middleware separato. Usa questo per servire:

require('http').createServer(require('serve-static')('.')).listen(3000)

Installa prima il serve-static .


Il modo in cui lo faccio è prima di tutto installare il server statico del nodo a livello globale tramite

npm install node-static -g

quindi accedere alla directory che contiene i file html e avviare il server static con static .

Vai al browser e digita localhost:8080/"yourHtmlFile" .


Il server Node.js più semplice è solo:

$ npm install http-server -g

Ora puoi eseguire un server tramite i seguenti comandi:

$ cd MyApp

$ http-server

Se si utilizza NPM 5.2.0 o versioni successive, è possibile utilizzare http-server senza installarlo con npx . Questo non è raccomandato per l'uso in produzione, ma è un ottimo modo per ottenere rapidamente un server in esecuzione su localhost.

$ npx http-server

Oppure puoi provare questo, che apre il tuo browser web e abilita le richieste CORS:

$ http-server -o --cors

Per ulteriori opzioni, consulta la documentazione per http-server su GitHub , oppure esegui:

$ http-server --help

Un sacco di altre caratteristiche interessanti e un semplice dispiegamento cerebrale di NodeJitsu.

Feature Forks

Naturalmente puoi facilmente ricaricare le funzionalità con la tua forchetta. Potresti scoprire che è già stato fatto in uno dei già esistenti 800 forch di questo progetto:

Light Server: un'alternativa rinfrescante automatica

Una buona alternativa a http-server è light-server . Supporta la sorveglianza dei file e l'aggiornamento automatico e molte altre funzionalità.

$ npm install -g light-server 
$ light-server

Aggiungi al menu di scelta rapida della directory in Esplora risorse

 reg.exe add HKCR\Directory\shell\LightServer\command /ve /t REG_EXPAND_SZ /f /d "\"C:\nodejs\light-server.cmd\" \"-o\" \"-s\" \"%V\""

Semplice server REST JSON

Se è necessario creare un semplice server REST per un progetto prototipo, json-server potrebbe essere quello che stai cercando.

Editor di aggiornamento automatico

La maggior parte degli editor di pagine Web e degli strumenti IDE include ora un server Web che guarderà i tuoi file sorgente e aggiornerà automaticamente la tua pagina web quando cambieranno.

L'editor di testo open source Brackets include anche un server Web statico NodeJS. Basta aprire qualsiasi file HTML in Brackets, premere " Anteprima dal vivo " e avvia un server statico e apre il browser nella pagina. Il browser si aggiornerà automaticamente ogni volta che modifichi e salvi il file HTML. Ciò è particolarmente utile quando si testano siti Web adattivi. Apri la tua pagina HTML su più browser / dimensioni della finestra / dispositivi. Salva la pagina HTML e verifica immediatamente se le tue risorse adattive funzionano mentre vengono aggiornate automaticamente.

Sviluppatori di PhoneGap

Se stai codificando un'app mobile ibrida , potresti essere interessato a sapere che il team di PhoneGap ha utilizzato questo concetto di aggiornamento automatico con la nuova app PhoneGap . Questa è un'app mobile generica che può caricare i file HTML5 da un server durante lo sviluppo. Questo è un trucco molto astuto poiché ora puoi saltare i passaggi di compilazione / distribuzione lenti nel tuo ciclo di sviluppo per le app mobili ibride se stai cambiando i file JS / CSS / HTML - che è ciò che fai la maggior parte del tempo. Forniscono anche il server Web NodeJS statico (eseguire phonegap serve ) che rileva le modifiche ai file.

PhoneGap + Sencha Touch Developers

Ho ora adattato ampiamente il server statico PhoneGap e l'app PhoneGap Developer per gli sviluppatori Sencha Touch e jQuery Mobile. Dai un'occhiata a Sencha Touch Live . Supporta - QR QR code e --localtunnel che proxy il tuo server statico dal tuo computer desktop a un URL al di fuori del firewall! Tonnellate di usi. Massiccia velocità per gli sviluppatori ibridi per dispositivi mobili.

Sviluppatori di framework Cordova + Ionic

Le funzionalità di server locale e di aggiornamento automatico sono integrate nello strumento ionic . Esegui ionic serve dalla tua cartella app. Ancora meglio ... ionic serve --lab per visualizzare automaticamente le viste affiancate di iOS e Android.


La maggior parte delle risposte sopra descritte descrive molto bene come vengono offerti i contenuti. Quello che stavo cercando come ulteriore era elencare la directory in modo da poter sfogliare altri contenuti della directory. Ecco la mia soluzione per ulteriori lettori:

'use strict';

var finalhandler = require('finalhandler');
var http = require('http');
var serveIndex = require('serve-index');
var serveStatic = require('serve-static');
var appRootDir = require('app-root-dir').get();
var log = require(appRootDir + '/log/bunyan.js');

var PORT = process.env.port || 8097;

// Serve directory indexes for reports folder (with icons)
var index = serveIndex('reports/', {'icons': true});

// Serve up files under the folder
var serve = serveStatic('reports/');

// Create server
var server = http.createServer(function onRequest(req, res){
    var done = finalhandler(req, res);
    serve(req, res, function onNext(err) {
    if (err)
        return done(err);
    index(req, res, done);
    })
});


server.listen(PORT, log.info('Server listening on: ', PORT));

La versione più semplice che ho trovato è la seguente. Per scopi educativi, è la cosa migliore, perché non usa alcuna biblioteca astratta.

var http = require('http'),
url = require('url'),
path = require('path'),
fs = require('fs');

var mimeTypes = {
  "html": "text/html",
  "mp3":"audio/mpeg",
  "mp4":"video/mp4",
  "jpeg": "image/jpeg",
  "jpg": "image/jpeg",
  "png": "image/png",
  "js": "text/javascript",
  "css": "text/css"};

http.createServer(function(req, res) {
    var uri = url.parse(req.url).pathname;
    var filename = path.join(process.cwd(), uri);
    fs.exists(filename, function(exists) {
        if(!exists) {
            console.log("not exists: " + filename);
            res.writeHead(200, {'Content-Type': 'text/plain'});
            res.write('404 Not Found\n');
            res.end();
            return;
        }
        var mimeType = mimeTypes[path.extname(filename).split(".")[1]];
        res.writeHead(200, {'Content-Type':mimeType});

        var fileStream = fs.createReadStream(filename);
        fileStream.pipe(res);

    }); //end path.exists
}).listen(1337);

Ora vai al browser e apri di seguito:

http://127.0.0.1/image.jpg

Qui image.jpg dovrebbe essere nella stessa directory di questo file. Spero che questo aiuti qualcuno :)


Non hai bisogno di esprimere. Non hai bisogno di connetterti. Node.js ha http NATIVELY. Tutto quello che devi fare è restituire un file dipendente dalla richiesta:

var http = require('http')
var url = require('url')
var fs = require('fs')

http.createServer(function (request, response) {
    var requestUrl = url.parse(request.url)    
    response.writeHead(200)
    fs.createReadStream(requestUrl.pathname).pipe(response)  // do NOT use fs's sync methods ANYWHERE on production (e.g readFileSync) 
}).listen(9615)    

Un esempio più completo che assicura che le richieste non possano accedere ai file al di sotto di una directory di base e che esegua la corretta gestione degli errori:

var http = require('http')
var url = require('url')
var fs = require('fs')
var path = require('path')
var baseDirectory = __dirname   // or whatever base directory you want

var port = 9615

http.createServer(function (request, response) {
    try {
        var requestUrl = url.parse(request.url)

        // need to use path.normalize so people can't access directories underneath baseDirectory
        var fsPath = baseDirectory+path.normalize(requestUrl.pathname)

        var fileStream = fs.createReadStream(fsPath)
        fileStream.pipe(response)
        fileStream.on('open', function() {
             response.writeHead(200)
        })
        fileStream.on('error',function(e) {
             response.writeHead(404)     // assume the file doesn't exist
             response.end()
        })
   } catch(e) {
        response.writeHead(500)
        response.end()     // end the response so browsers don't hang
        console.log(e.stack)
   }
}).listen(port)

console.log("listening on port "+port)

Non sono sicuro che sia esattamente ciò che volevi, tuttavia puoi provare a cambiare:

{'Content-Type': 'text/plain'}

a questo:

{'Content-Type': 'text/html'}

In questo modo il client browser visualizzerà il file come html anziché come testo normale.


Penso che la parte che ti manca in questo momento sia che stai inviando:

Content-Type: text/plain

Se desideri che un browser Web esegua il rendering dell'HTML, devi cambiarlo in:

Content-Type: text/html

Piuttosto che gestire un'istruzione switch, penso che sia più ordinata cercare il tipo di contenuto da un dizionario:

var contentTypesByExtension = {
    'html': "text/html",
    'js':   "text/javascript"
};

...

    var contentType = contentTypesByExtension[fileExtension] || 'text/plain';

Questa è una delle soluzioni più veloci che utilizzo per visualizzare rapidamente le pagine web

sudo npm install ripple-emulator -g

Da quel momento in poi basta inserire la directory dei file html ed eseguire

ripple emulate

quindi cambia il dispositivo in Nexus 7 landscape.


Step1 (prompt dei comandi interno [spero che tu npm install express ]): npm install express

Passaggio 2: creare un file server.js

var fs = require("fs");
var host = "127.0.0.1";
var port = 1337;
var express = require("express");

var app = express();
app.use(express.static(__dirname + "/public")); //use static files in ROOT/public folder

app.get("/", function(request, response){ //root dir
    response.send("Hello!!");
});

app.listen(port, host);

Nota, è necessario aggiungere WATCHFILE (o usare nodemon). Sopra il codice è solo per un semplice server di connessione.

PASSAGGIO 3: node server.js o nodemon server.js

Ora esiste un metodo più semplice se si desidera semplicemente ospitare un server HTTP semplice. npm install -g http-server

e apri la nostra directory e digita http-server

https://www.npmjs.org/package/http-server


da w3schools

è abbastanza facile creare un server nodo per servire qualsiasi file richiesto e non è necessario installare alcun pacchetto per esso

var http = require('http');
var url = require('url');
var fs = require('fs');

http.createServer(function (req, res) {
  var q = url.parse(req.url, true);
  var filename = "." + q.pathname;
  fs.readFile(filename, function(err, data) {
    if (err) {
      res.writeHead(404, {'Content-Type': 'text/html'});
      return res.end("404 Not Found");
    }  
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    return res.end();
  });
}).listen(8080);

http://localhost:8080/file.html

servirà file.html dal disco


se hai un nodo installato sul tuo PC probabilmente hai l'NPM, se non hai bisogno di roba NodeJS, puoi usare il pacchetto serve per questo:

1 - Installa il pacchetto sul tuo PC:

npm install -g serve

2 - Servire la tua cartella statica:

serve <path> 
d:> serve d:\StaticSite

Ti mostrerà quale porta viene servita la tua cartella statica, basta navigare verso l'host come:

http://localhost:3000

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    // change the to 'text/plain' to 'text/html' it will work as your index page
    res.end(index);
}).listen(9615);

Ti penso dove cercare questo. Nel tuo index.html, basta riempirlo con il normale codice html - qualsiasi cosa tu voglia renderizzare su di esso, come:

<html>
    <h1>Hello world</h1>
</html>

var http = require('http');
var fs = require('fs');
var index = fs.readFileSync('index.html');

http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'html'});
res.end(index);
}).listen(9615);

//Just Change The CONTENT TYPE to 'html'






webserver