it-swarm.com.de

Verwenden von node.js als einfachen Webserver

Ich möchte einen sehr einfachen HTTP-Server betreiben. Jede GET-Anforderung an example.com sollte index.html erhalten, jedoch als reguläre HTML-Seite (d. H. Dieselbe Erfahrung wie beim Lesen normaler Webseiten).

Mit dem folgenden Code kann ich den Inhalt von index.html lesen. Wie diene ich index.html als reguläre Webseite?

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

Ein Vorschlag unten ist kompliziert und erfordert, dass ich eine get -Zeile für jede Ressourcendatei (CSS, JavaScript, Bilder) schreibe, die ich verwenden möchte.

Wie kann ich eine einzelne HTML-Seite mit einigen Bildern, CSS und JavaScript bereitstellen?

1051
idophir

Sie können hierfür Connect und ServeStatic mit Node.js verwenden:

  1. Installieren Sie connect und serve-static mit NPM

    $ npm install connect serve-static
    
  2. Erstellen Sie die Datei server.js mit folgendem Inhalt:

    var connect = require('connect');
    var serveStatic = require('serve-static');
    connect().use(serveStatic(__dirname)).listen(8080, function(){
        console.log('Server running on 8080...');
    });
    
  3. Führen Sie mit Node.js aus

    $ node server.js
    

Du kannst jetzt zu http://localhost:8080/yourfile.html gehen

943

Der einfachste Node.js-Server ist einfach:

_$ npm install http-server -g
_

Jetzt können Sie einen Server mit den folgenden Befehlen ausführen:

_$ cd MyApp

$ http-server
_

Wenn Sie NPM 5.2.0 oder neuer verwenden, können Sie _http-server_ verwenden, ohne es mit npx zu installieren. Dies wird nicht für die Verwendung in der Produktion empfohlen, ist jedoch eine hervorragende Möglichkeit, um einen Server schnell auf localhost zum Laufen zu bringen.

_$ npx http-server
_

Sie können auch Folgendes versuchen, um Ihren Webbrowser zu öffnen und CORS-Anforderungen zu aktivieren:

_$ http-server -o --cors
_

Weitere Optionen finden Sie in der Dokumentation für _http-server_ auf GitHub oder führen Sie Folgendes aus:

_$ http-server --help
_

Viele andere nette Funktionen und eine unglaublich einfache Bereitstellung für NodeJitsu.

Feature Gabeln

Natürlich können Sie die Funktionen ganz einfach mit Ihrer eigenen Gabel ergänzen. Möglicherweise wurde es bereits in einer der über 800 Gabeln dieses Projekts ausgeführt:

Light Server: Eine Alternative zur automatischen Aktualisierung

Eine gute Alternative zu _http-server_ ist light-server . Es unterstützt Dateiüberwachung und automatische Aktualisierung sowie viele andere Funktionen.

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

Zum Kontextmenü Ihres Verzeichnisses im Windows Explorer hinzufügen

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

Einfacher JSON REST Server

Wenn Sie einen einfachen REST Server für ein Prototypprojekt erstellen müssen, ist json-server möglicherweise das, wonach Sie suchen.

Auto Refreshing Editors

Die meisten Webseiten-Editoren und IDE -Tools enthalten jetzt einen Webserver, der Ihre Quelldateien überwacht und Ihre Webseite automatisch aktualisiert, wenn sie geändert werden.

Ich benutze Live Server mit Visual Studio Code.

Der Open Source Texteditor Klammern enthält auch einen statischen NodeJS-Webserver. Öffnen Sie einfach eine HTML-Datei in Klammern, drücken Sie " Live Preview " und es startet einen statischen Server und öffnet Ihren Browser auf der Seite. Der Browser ** wird automatisch aktualisiert, wenn Sie die HTML-Datei bearbeiten und speichern. Dies ist besonders nützlich, wenn Sie adaptive Websites testen. Öffnen Sie Ihre HTML-Seite in mehreren Browsern/Fenstergrößen/Geräten. Speichern Sie Ihre HTML-Seite und prüfen Sie sofort, ob Ihre anpassungsfähigen Inhalte funktionieren, da alle automatisch aktualisiert werden.

PhoneGap-Entwickler

Wenn Sie eine hybride mobile App codieren, möchten Sie vielleicht wissen, dass das PhoneGap Team dieses Konzept der automatischen Aktualisierung mit der neuen PhoneGap App) an Bord genommen hat . Dies ist eine allgemeine mobile App, mit der HTML5-Dateien während der Entwicklung von einem Server geladen werden können. Dies ist ein sehr raffinierter Trick, da Sie jetzt die langsamen Kompilierungs-/Bereitstellungsschritte in Ihrem Entwicklungszyklus für hybride mobile Apps überspringen können, wenn Sie JS-/CSS-/HTML-Dateien ändern - was Sie die meiste Zeit tun. Sie stellen auch den statischen NodeJS-Webserver (run _phonegap serve_) bereit, der Dateiänderungen erkennt.

PhoneGap + Sencha Touch Entwickler

Ich habe den statischen PhoneGap-Server und die PhoneGap-Entwickler-App jetzt umfassend für Sencha Touch- und jQuery Mobile-Entwickler angepasst. Schau es dir an unter Sencha Touch Live . Unterstützt --qr QR-Codes und --localtunnel, die Ihren statischen Server von Ihrem Desktop-Computer an eine URL außerhalb Ihrer Firewall weiterleiten! Tonnenweise verwendet. Massive Beschleunigung für hybride mobile Entwickler.

Cordova + Ionic Framework-Entwickler

Lokale Server- und automatische Aktualisierungsfunktionen werden in das Tool ionic integriert. Führen Sie einfach _ionic serve_ in Ihrem App-Ordner aus. Noch besser ... ionic serve --lab um automatisch aktualisierte Ansichten von iOS und Android nebeneinander anzuzeigen.

928
Tony O'Hagan

Check out this Kernel . Ich reproduziere es hier als Referenz, aber das Gist wurde regelmäßig aktualisiert.

Node.JS-Webserver für statische Dateien. Fügen Sie es in Ihren Pfad ein, um Server in einem beliebigen Verzeichnis zu starten, und verwenden Sie ein optionales Port-Argument.

var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs"),
    port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

  fs.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      response.writeHead(200);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");

Update

The Gist verarbeitet CSS- und JS-Dateien. Ich habe es selbst benutzt. Das Lesen/Schreiben im "Binär" -Modus ist kein Problem. Dies bedeutet lediglich, dass die Datei von der Dateibibliothek nicht als Text interpretiert wird und nicht mit dem in der Antwort zurückgegebenen Inhaltstyp zusammenhängt.

Das Problem mit Ihrem Code ist, dass Sie immer einen Inhaltstyp "text/plain" zurückgeben. Der obige Code gibt keinen Inhaltstyp zurück. Wenn Sie ihn jedoch nur für HTML, CSS und JS verwenden, kann ein Browser auf diesen Inhaltstyp schließen. Kein Inhaltstyp ist besser als ein falscher.

Normalerweise ist der Inhaltstyp eine Konfiguration Ihres Webservers. Es tut mir leid, wenn dies das Ihr Problem nicht löst, aber es funktionierte für mich als einfacher Entwicklungsserver und dachte, es könnte einigen anderen Menschen helfen. Wenn Sie in der Antwort korrekte Inhaltstypen benötigen, müssen Sie diese entweder explizit als joeytwiddle definieren oder eine Bibliothek wie Connect mit vernünftigen Standardeinstellungen verwenden. Das Schöne daran ist, dass es einfach und in sich geschlossen ist (keine Abhängigkeiten).

Aber ich spüre dein Problem. Hier ist also die kombinierte Lösung.

var http = require("http"),
    url = require("url"),
    path = require("path"),
    fs = require("fs")
    port = process.argv[2] || 8888;

http.createServer(function(request, response) {

  var uri = url.parse(request.url).pathname
    , filename = path.join(process.cwd(), uri);

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

  fs.exists(filename, function(exists) {
    if(!exists) {
      response.writeHead(404, {"Content-Type": "text/plain"});
      response.write("404 Not Found\n");
      response.end();
      return;
    }

    if (fs.statSync(filename).isDirectory()) filename += '/index.html';

    fs.readFile(filename, "binary", function(err, file) {
      if(err) {        
        response.writeHead(500, {"Content-Type": "text/plain"});
        response.write(err + "\n");
        response.end();
        return;
      }

      var headers = {};
      var contentType = contentTypesByExtension[path.extname(filename)];
      if (contentType) headers["Content-Type"] = contentType;
      response.writeHead(200, headers);
      response.write(file, "binary");
      response.end();
    });
  });
}).listen(parseInt(port, 10));

console.log("Static file server running at\n  => http://localhost:" + port + "/\nCTRL + C to shutdown");
158
Jonathan Tran

Du brauchst keinen Express. Sie brauchen keine Verbindung. Node.js macht http NATIVELY. Sie müssen lediglich eine von der Anforderung abhängige Datei zurückgeben:

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)    

Ein ausführlicheres Beispiel, das sicherstellt, dass Anfragen nicht auf Dateien unter einem Basisverzeichnis zugreifen können und die Fehlerbehandlung korrekt ausführt:

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)
93
B T

Ich denke, der Teil, den Sie gerade vermissen, ist, dass Sie senden:

Content-Type: text/plain

Wenn Sie möchten, dass ein Webbrowser den HTML-Code wiedergibt, sollten Sie Folgendes ändern:

Content-Type: text/html
67
clee

Schritt 1 (innerhalb der Eingabeaufforderung [Ich hoffe, Sie cd zu Ihrem Ordner]): npm install express

Schritt 2: Erstellen Sie eine Datei 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);

Bitte beachten Sie, dass Sie auch WATCHFILE hinzufügen (oder nodemon verwenden) sollten. Der obige Code gilt nur für einen einfachen Verbindungsserver.

SCHRITT 3: node server.js oder nodemon server.js

Es gibt jetzt eine einfachere Methode, wenn Sie nur einen einfachen HTTP-Server hosten möchten. npm install -g http-server

und öffne unser Verzeichnis und tippe http-server

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

45
STEEL

Der schnelle Weg:

var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/../public')); // ← adjust
app.listen(3000, function() { console.log('listening'); });

Dein Weg:

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

http.createServer(function (req, res) {
    console.dir(req.url);

    // will get you  '/' or 'index.html' or 'css/styles.css' ...
    // • you need to isolate extension
    // • have a small mimetype lookup array/object
    // • only there and then reading the file
    // •  delivering it after setting the right content type

    res.writeHead(200, {'Content-Type': 'text/html'});

    res.end('ok');
}).listen(3001);
30
Frank Nocke

Anstatt sich mit einer switch-Anweisung zu befassen, halte ich es für sinnvoller, den Inhaltstyp in einem Wörterbuch nachzuschlagen:

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

...

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

Dies ist im Grunde eine aktualisierte Version der akzeptierten Antwort für Connect Version 3:

var connect = require('connect');
var serveStatic = require('serve-static');

var app = connect();

app.use(serveStatic(__dirname, {'index': ['index.html']}));
app.listen(3000);

Ich habe auch eine Standardoption hinzugefügt, damit index.html als Standardeinstellung verwendet wird.

15
tomet

Sie müssen keine NPM-Module verwenden, um einen einfachen Server auszuführen. Es gibt eine sehr kleine Bibliothek mit dem Namen " NPM Free Server " für Node:

50 Codezeilen, werden ausgegeben, wenn Sie eine Datei oder einen Ordner anfordern, und geben ihm eine rote oder grüne Farbe, wenn dies fehlgeschlagen ist. Weniger als 1 KB groß (minimiert).

13
Jaredcheeda

wenn Sie einen Knoten auf Ihrem PC installiert haben, haben Sie wahrscheinlich den NPM. Wenn Sie kein NodeJS-Zeug benötigen, können Sie das serve -Paket dafür verwenden:

1 - Installieren Sie das Paket auf Ihrem PC:

npm install -g serve

2 - Servieren Sie Ihren statischen Ordner:

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

Es wird Ihnen angezeigt, welcher Port Ihres statischen Ordners bedient wird. Navigieren Sie einfach zum Host wie folgt:

http://localhost:3000
12
Diego Mendes

Ich habe auf npm eine interessante Bibliothek gefunden, die für Sie von Nutzen sein könnte. Es heißt mime (npm install mime oder https://github.com/broofa/node-mime ) und kann den Mime-Typ einer Datei bestimmen. Hier ist ein Beispiel eines Webservers, den ich damit geschrieben habe:

var mime = require("mime"),http = require("http"),fs = require("fs");
http.createServer(function (req, resp) {
path  = unescape(__dirname + req.url)
var code = 200
 if(fs.existsSync(path)) {
    if(fs.lstatSync(path).isDirectory()) {
        if(fs.existsSync(path+"index.html")) {
        path += "index.html"
        } else {
            code = 403
            resp.writeHead(code, {"Content-Type": "text/plain"});
            resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
        }
    }
    resp.writeHead(code, {"Content-Type": mime.lookup(path)})
    fs.readFile(path, function (e, r) {
    resp.end(r);

})
} else {
    code = 404
    resp.writeHead(code, {"Content-Type":"text/plain"});
    resp.end(code+" "+http.STATUS_CODES[code]+" "+req.url);
}
console.log("GET "+code+" "+http.STATUS_CODES[code]+" "+req.url)
}).listen(9000,"localhost");
console.log("Listening at http://localhost:9000")

Dies wird jede normale Text- oder Bilddatei bedienen (.html, .css, .js, .pdf, .jpg, .png, .m4a und .mp3 sind die von mir getesteten Erweiterungen, aber theoretisch sollte es für alles funktionieren)

Entwickler-Notizen

Hier ist ein Beispiel für die Ausgabe, die ich damit erhalten habe:

Listening at http://localhost:9000
GET 200 OK /cloud
GET 404 Not Found /cloud/favicon.ico
GET 200 OK /cloud/icon.png
GET 200 OK /
GET 200 OK /501.png
GET 200 OK /cloud/manifest.json
GET 200 OK /config.log
GET 200 OK /export1.png
GET 200 OK /Chrome3DGlasses.pdf
GET 200 OK /cloud
GET 200 OK /-1
GET 200 OK /Delta-Vs_for_inner_Solar_System.svg

Beachten Sie die Funktion unescape in der Pfadkonstruktion. Dies ermöglicht Dateinamen mit Leerzeichen und kodierten Zeichen.

9
MayorMonty

So installiere ich zuerst den Node Static Server global über

npm install node-static -g

navigieren Sie dann zu dem Verzeichnis, das Ihre HTML-Dateien enthält, und starten Sie den statischen Server mit static.

Gehen Sie zum Browser und geben Sie localhost:8080/"yourHtmlFile" ein.

8
samba

Bearbeiten:

Node.js Beispiel-App Node Chat bietet die von Ihnen gewünschte Funktionalität.
In seiner README.textfile
3. Schritt ist, wonach Sie suchen.

schritt 1

  • erstellen Sie einen Server, der mit Hallo Welt auf Port 8002 antwortet

schritt 2

  • erstelle eine index.html und serviere sie

schritt 3

  • führen Sie util.js ein
  • ändern Sie die Logik, sodass alle statischen Dateien bereitgestellt werden
  • zeige 404, falls keine Datei gefunden wird

schritt 4

  • füge jquery-1.4.2.js hinzu
  • fügen Sie client.js hinzu
  • ändern Sie index.html in Benutzer nach Spitznamen fragen

Hier ist das server.js

Hier ist das til.js

8
Kerem Baydoğan

Grundsätzlich wird die akzeptierte Antwort kopiert, es wird jedoch vermieden, eine js-Datei zu erstellen.

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

Fand es sehr praktisch.

Aktualisieren

Mit der neuesten Express-Version wurde serve-static zu einer separaten Middleware. Verwenden Sie dies, um zu dienen:

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

Installieren Sie zuerst serve-static.

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

Ich denke du warst auf der Suche danach. Füllen Sie es in Ihrer index.html einfach mit normalem HTML-Code - wie auch immer Sie darauf rendern möchten:

<html>
    <h1>Hello world</h1>
</html>
7
Ashish Ranjan

Ich bin mir nicht sicher, ob dies genau das ist, was Sie wollten. Sie können jedoch versuchen, Folgendes zu ändern:

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

dazu:

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

Dadurch zeigt der Browser-Client die Datei als HTML-Datei anstatt als Nur-Text-Datei an.

5
Xenry

Ich verwende den folgenden Code, um einen einfachen Webserver zu starten, der die Standard-HTML-Datei rendert, wenn in der URL keine Datei angegeben ist.

var http = require('http'),
fs = require('fs'),
url = require('url'),
rootFolder = '/views/',
defaultFileName = '/views/5 Tips on improving Programming Logic   Geek Files.htm';


http.createServer(function(req, res){

    var fileName = url.parse(req.url).pathname;
    // If no file name in Url, use default file name
    fileName = (fileName == "/") ? defaultFileName : rootFolder + fileName;

    fs.readFile(__dirname + decodeURIComponent(fileName), 'binary',function(err, content){
        if (content != null && content != '' ){
            res.writeHead(200,{'Content-Length':content.length});
            res.write(content);
        }
        res.end();
    });

}).listen(8800);

Es werden alle js-, css- und image-Dateien sowie alle HTML-Inhalte gerendert.

Stimmen Sie der Aussage "Kein Inhaltstyp ist besser als ein falscher" zu.

5
Sachin303

von w3schools

es ist ziemlich einfach, einen Knotenserver für alle angeforderten Dateien zu erstellen, und Sie müssen keine Pakete dafür installieren

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

dient file.html von der Festplatte

4
Ahmed M. Matar

Sie können diese einfach in Ihre Shell eingeben

npx serve

Repo: https://github.com/zeit/serve .

4
Geng Jiawen

Eine etwas ausführlichere Express-4.x-Version, die jedoch eine Verzeichnisliste, Komprimierung, Zwischenspeicherung und Protokollierung von Anforderungen in einer minimalen Anzahl von Zeilen bietet

var express = require('express');
var compress = require('compression');
var directory = require('serve-index');
var morgan = require('morgan'); //logging for express

var app = express();

var oneDay = 86400000;

app.use(compress());
app.use(morgan());
app.use(express.static('filesdir', { maxAge: oneDay }));
app.use(directory('filesdir', {'icons': true}))

app.listen(process.env.PORT || 8000);

console.log("Ready To serve files !")
4
Bruno Grieder

Verrückte Menge komplizierter Antworten hier. Wenn Sie nicht beabsichtigen, nodeJS-Dateien/-Datenbanken zu verarbeiten, sondern nur statische HTML-/CSS-/JS-/Image-Dateien bereitstellen möchten, installieren Sie einfach das PushState-Server -Modul oder ähnliches.

Hier ist ein "One Liner", der eine Mini-Site erstellt und startet. Fügen Sie einfach den gesamten Block in Ihrem Terminal in das entsprechende Verzeichnis ein.

mkdir mysite; \
cd mysite; \
npm install pushstate-server --save; \
mkdir app; \
touch app/index.html; \
echo '<h1>Hello World</h1>' > app/index.html; \
touch server.js; \
echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './app' });" > server.js; \
node server.js

Öffnen Sie den Browser und gehen Sie zu http: // localhost: 30 . Getan.

Der Server verwendet das Verzeichnis app als Stammverzeichnis für die Bereitstellung von Dateien. Um zusätzliche Assets hinzuzufügen, platzieren Sie diese einfach in diesem Verzeichnis.

4
cyberwombat

Die meisten der obigen Antworten beschreiben sehr gut, wie Inhalte bereitgestellt werden. Als Zusatz habe ich nach einer Auflistung des Verzeichnisses gesucht, damit andere Inhalte des Verzeichnisses durchsucht werden können. Hier ist meine Lösung für weitere Leser:

'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));
3
Abu Shumon
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'
3
user3389163

Es gibt bereits einige großartige Lösungen für einen einfachen nodejs server. Es gibt eine weitere Lösung, wenn Sie live-reloading benötigen, während Sie Änderungen an Ihren Dateien vorgenommen haben.

npm install lite-server -g

navigieren Sie in Ihrem Verzeichnis und machen Sie

lite-server

es öffnet den Browser für Sie mit Live-Reload.

3
lokeshjain2008

Die einfachere Version, auf die ich gestoßen bin, ist wie folgt. Für Unterrichtszwecke ist es am besten, weil es keine abstrakten Bibliotheken verwendet.

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

Gehen Sie nun zum Browser und öffnen Sie folgendes:

http://127.0.0.1/image.jpg

Hier sollte sich image.jpg im selben Verzeichnis wie diese Datei befinden. Hoffe das hilft jemandem :)

2
Kaushal28

Dies ist eine der schnellsten Lösungen, mit denen ich Webseiten schnell sehen kann

Sudo npm install ripple-emulator -g

Von da an geben Sie einfach das Verzeichnis Ihrer HTML-Dateien ein und starten

ripple emulate

ändern Sie dann das Gerät in das Nexus 7-Querformat.

2
Helzgate

Ich kann SugoiJS auch empfehlen. Es ist sehr einfach einzurichten und bietet die Möglichkeit, schnell mit dem Schreiben zu beginnen. Es hat großartige Funktionen.

Schauen Sie hier, um loszulegen: http://demo.sugoijs.com/ , Dokumentation: https://wiki.sugoijs.com/

Es hat Anforderungsbehandlungs-Dekoratoren, Anforderungsrichtlinien und Autorisierungsrichtlinien-Dekoratoren.

Zum Beispiel:

import {Controller,Response,HttpGet,RequestParam} from "@sugoi/server";
​
@Controller('/dashboard')
export class CoreController{
    constructor(){}
​
    @HttpGet("/:role")
    test(@RequestParam('role') role:string,
         @RequestHeader("role") headerRole:string){
        if(role === headerRole )
            return "authorized";
        else{
            throw new Error("unauthorized")
        }
    }
}
1
Gen4ik

Ist mit den Tonnen von Bibliotheksgeschenken heute sehr einfach. Die Antworten hier sind zweckmäßig. Wenn Sie eine andere Version möchten, starten Sie diese schneller und einfacher

Natürlich zuerst node.js installieren. Später:

> # module with zero dependencies
> npm install -g @kawix/[email protected] 
> # change /path/to/static with your folder or empty for current
> kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js" /path/to/static

Hier der Inhalt von " https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js " (Sie müssen ihn nicht herunterladen, ich gepostet um zu verstehen wie das geht)

// you can use like this:
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" /path/to/static
// kwcore "https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express.js" 

// this will download the npm module and make a local cache
import express from 'npm://[email protected]^4.16.4'
import Path from 'path'

var folder= process.argv[2] || "."
folder= Path.resolve(process.cwd(), folder)
console.log("Using folder as public: " + folder)

var app = express() 
app.use(express.static(folder)) 
app.listen(8181)
console.log("Listening on 8181")
1
James Suárez

local-web-server ist auf jeden fall einen blick wert! Hier ist ein Auszug aus der Readme:

lokaler Webserver

Ein schlanker, modularer Webserver für eine schnelle Full-Stack-Entwicklung.

  • Unterstützt HTTP, HTTPS und HTTP2.
  • Klein und 100% personalisierbar. Laden und verwenden Sie nur das für Ihr Projekt erforderliche Verhalten.
  • Fügen Sie eine benutzerdefinierte Ansicht hinzu, um die Darstellung der Aktivität zu personalisieren.
  • Programmatische und Befehlszeilenschnittstellen.

Mit diesem Tool können Sie:

  • Erstellen Sie jede Art von Front-End-Webanwendung (statische, dynamische, einseitige, progressive Webanwendung, React usw.).
  • Prototyp eines Back-End-Dienstes (REST-API, Microservice, Websocket, Server Sent Events-Dienst usw.).
  • Überwachen Sie die Aktivität, analysieren Sie die Leistung, experimentieren Sie mit der Caching-Strategie usw.

Local-Web-Server ist eine Distribution von lws , die mit einem "Starter Pack" nützlicher Middleware gebündelt ist.

Zusammenfassung

Dieses Paket installiert das Befehlszeilentool ws (siehe Benutzerhandbuch ).

Statische Website

Wenn Sie ws ohne Argumente ausführen, wird das aktuelle Verzeichnis als statische Website gehostet. Wenn Sie zum Server navigieren, wird eine Verzeichnisliste oder Ihr index.html angezeigt, sofern diese Datei vorhanden ist.

$ ws
Listening on http://mbp.local:8000, http://127.0.0.1:8000, http://192.168.0.100:8000

Tutorial zu statischen Dateien .

Dieser Clip zeigt das statische Hosting sowie einige Protokollausgabeformate - dev und stats.

Einseitige Anwendung

Das Bereitstellen einer Einzelseitenanwendung (eine App mit clientseitigem Routing, z. B. eine React oder Angular App) ist so einfach wie das Angeben des Namens Ihrer Einzelseite:

$ ws --spa index.html

Bei einer statischen Site würden Anforderungen nach typischen SPA-Pfaden (z. B. /user/1, /login) 404 Not Found zurückgeben, da an dieser Position keine Datei vorhanden ist. Indem Sie jedoch index.html als SPA markieren, erstellen Sie diese Regel:

Wenn eine statische Datei angefordert wird (z. B. /css/style.css), dann servieren Sie sie, wenn nicht (z. B. /login), servieren Sie die angegebene SPA und behandeln Sie die Route clientseitig.

SPA-Tutorial .

Umschreiben von URLs und weitergeleitete Anfragen

Ein weiterer häufiger Anwendungsfall ist die Weiterleitung bestimmter Anforderungen an einen Remoteserver.

Mit dem folgenden Befehl werden Blogpost-Anforderungen von jedem Pfad, der mit /posts/ bis https://jsonplaceholder.typicode.com/posts/ beginnt, ersetzt. Beispielsweise würde eine Anforderung für /posts/1 an https://jsonplaceholder.typicode.com/posts/1 weitergeleitet.

$ ws --rewrite '/posts/(.*) -> https://jsonplaceholder.typicode.com/posts/$1'

Tutorial umschreiben .

In diesem Clip wird der oben beschriebene Vorgang sowie die Verwendung von --static.extensions zur Angabe einer Standarddateierweiterung und --verbose zur Überwachung der Aktivität veranschaulicht.

HTTPS und HTTP2

Übergeben Sie für HTTPS oder HTTP2 die Flags --https oder --http2. Siehe Wiki für weitere Konfigurationsoptionen und eine Anleitung, wie Sie das "grüne Vorhängeschloss" in Ihrem Browser bekommen.

$ lws --http2
Listening at https://mba4.local:8000, https://127.0.0.1:8000, https://192.168.0.200:8000
1
Lloyd