Anda dapat menggunakan Connect dan Namun dengan Node.js untuk ini:

1. Menginstal menghubungkan dan melayani-statis dengan NPM

$ npm install menghubungkan melayani-statis

1. Membuat server.js file dengan konten ini:

var menghubungkan = require('menghubungkan'); var namun = require('melayani-statis'); connect().menggunakan(namun(__dirname)).mendengarkan(8080, function(){ konsol.log('Server yang berjalan pada 8080...'); });

1. Menjalankan dengan Node.js

$ node server.js

Sekarang anda dapat pergi ke http://localhost:8080/yourfile.html

Sederhana Node.js server adalah:

$ npm install http-server -g

Sekarang anda dapat menjalankan server melalui perintah berikut:

$ cd MyApp

$ http-server

Jika anda're menggunakan NPM 5.2.0 atau yang lebih baru, anda dapat menggunakan http-server tanpa menginstal itu dengan npx. Ini isn't direkomendasikan untuk digunakan dalam produksi, tetapi adalah cara yang bagus untuk cepat mendapatkan server yang berjalan pada localhost.

$ npx http-server

Atau, anda dapat mencoba ini, yang membuka browser web anda dan memungkinkan CORS permintaan:

$ http-server -o --cors

Untuk opsi lebih lanjut, check out dokumentasi untuk http-server di GitHub, atau menjalankan:

$ http-server --help

Banyak fitur bagus lainnya dan otak-mati-sederhana penyebaran ke NodeJitsu.

Fitur Garpu

Tentu saja, anda dapat dengan mudah top up fitur dengan garpu. Anda mungkin menemukan itu's sudah dilakukan di salah satu dari yang ada 800+ garpu dari proyek ini:

• https://github.com/nodeapps/http-server/network

Cahaya Server: Auto Alternatif Yang Menyegarkan

Alternatif yang bagus untuk http-server adalah cahaya-server. Mendukung file menonton dan auto-menyegarkan dan banyak fitur lainnya.

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

Tambahkan ke direktori anda menu konteks di Windows Explorer

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

Sederhana JSON REST server

Jika anda perlu untuk membuat sederhana SISANYA server untuk prototipe proyek kemudian json-server mungkin apa yang anda're looking for.

Auto Menyegarkan Editor

Sebagian besar halaman web editor dan IDE yang sesuai sekarang termasuk sebuah web server yang akan menonton anda sumber file, dan auto refresh halaman web anda ketika mereka berubah.

Saya menggunakan Live Server dengan Kode Visual Studio.

Tombol open source teks editor tanda Kurung juga termasuk NodeJS statis web server. Hanya membuka file HTML di dalam Kurung, tekan "Live Preview" dan itu dimulai server statis dan membuka browser anda di halaman ini. Browser akan *auto refresh setiap kali anda mengedit dan menyimpan file HTML. Hal ini terutama berguna ketika pengujian adaptif situs web. Membuka halaman HTML anda pada beberapa browser/ukuran jendela/perangkat. Menyimpan halaman HTML anda dan langsung melihat jika anda adaptif hal-hal bekerja seperti mereka semua* auto refresh.

PhoneGap Developer

Jika anda're coding hybrid mobile app, anda mungkin akan tertarik untuk mengetahui bahwa PhoneGap tim ini auto refresh konsep di papan dengan mereka baru PhoneGap App. Ini adalah generik aplikasi mobile yang dapat memuat HTML5 file dari server selama pengembangan. Ini adalah sangat licin trik karena sekarang anda dapat melewatkan lambat mengkompilasi/menyebarkan langkah-langkah dalam siklus pengembangan aplikasi mobile hybrid jika anda're mengubah JS/CSS/HTML file — yang adalah apa yang anda're lakukan sebagian besar waktu. Mereka juga menyediakan statis NodeJS web server (run phonegap melayani) yang mendeteksi perubahan file.

PhoneGap + Sencha Touch Pengembang

I've sekarang secara luas disesuaikan dengan PhoneGap server statis & PhoneGap Developer App untuk Sencha Touch & jQuery Mobile pengembang. Check it out di Sencha Touch Live. Mendukung --qr QR Codes dan-localtunnel bahwa proxy anda statis server dari komputer desktop anda ke URL di luar firewall anda! Ton menggunakan. Besar speedup untuk mobile hybrid devs.

Cordova + Ionic Framework Pengembang

Server lokal dan auto refresh fitur dipanggang ke dalam ion alat. Hanya menjalankan ionic melayani dari folder aplikasi. Bahkan lebih baik ... ionic melayani-lab untuk melihat mobil-menyegarkan berdampingan pandangan dari kedua iOS dan Android.

Check out ini inti. I'm mereproduksi itu di sini untuk referensi, tapi inti telah diperbarui secara teratur.

Node.JS file statis web server. Meletakkannya di jalan anda untuk api up server dalam direktori apapun, mengambil opsional port argumen.

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

Intinya tidak menangani css dan js file. I've digunakan sendiri. Menggunakan membaca/menulis di "biner" modus isn't masalah. Itu hanya berarti bahwa file isn't diartikan sebagai teks dengan file perpustakaan dan tidak berhubungan dengan content-type dikembalikan dalam respon.

Masalah dengan kode anda anda're selalu kembali konten-jenis "text/plain". Kode di atas tidak kembali setiap konten-jenis, tetapi jika anda're hanya menggunakan itu untuk HTML, CSS, dan JS, browser dapat menyimpulkan mereka baik-baik saja. Tidak ada konten-jenis yang lebih baik dari yang salah.

Biasanya content-type adalah konfigurasi dari server web anda. Jadi saya'm maaf jika ini doesn't memecahkan your masalah, tapi itu bekerja untuk saya sebagai seorang yang sederhana, pengembangan server dan pikir mungkin membantu beberapa orang lain. Jika anda perlu konten yang benar-jenis respon, anda juga perlu secara eksplisit mendefinisikan mereka sebagai joeytwiddle memiliki atau menggunakan perpustakaan seperti Terhubung yang memiliki default masuk akal. Hal yang baik tentang ini adalah bahwa hal itu's sederhana dan self-contained (tidak ketergantungan).

Tapi saya merasa masalah anda. Jadi di sini adalah solusi gabungan.

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

Anda don't perlu express. Anda don't perlu terhubung. Node.js apakah http NATIVE. Semua yang perlu anda lakukan adalah mengembalikan file yang tergantung pada permintaan:

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)    

Lebih lengkap contoh yang menjamin permintaan dapat't mengakses file-file di bawah dasar-direktori, dan tidak tepat penanganan kesalahan:

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)

Saya pikir bagian yang anda're hilang sekarang adalah bahwa anda're mengirimkan:

Content-Type: text/plain

Jika anda ingin web browser untuk membuat HTML, anda harus mengubah ini untuk:

Content-Type: text/html

Step1 (dalam command prompt [saya harap anda cd KE FOLDER]) : npm install express

Langkah 2: Buat sebuah 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);

Harap dicatat, anda harus menambahkan WATCHFILE (atau menggunakan nodemon) juga. Kode di atas adalah hanya untuk koneksi server.

LANGKAH 3: node server.js atau nodemon server.js

Sekarang ada banyak metode yang mudah jika anda hanya ingin menjadi tuan rumah sederhana HTTP server. npm install-g http-server

dan buka direktori kami dan ketik http-server

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

Cara cepat:

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

Cara:

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

Daripada berurusan dengan pernyataan switch, saya pikir itu's lebih rapi untuk pencarian jenis konten dari kamus:

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

...

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

Ini pada dasarnya adalah versi terbaru dari jawaban yang diterima untuk terhubung versi 3:

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

var app = connect();

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

Saya juga menambahkan opsi default sehingga index.html disajikan sebagai default.

jika anda memiliki node yang terpasang pada PC anda mungkin anda memiliki NPM, jika anda don't perlu NodeJS hal-hal, anda dapat menggunakan sajikan paket ini:

1 - Install paket pada PC anda:

npm install -g serve

2 - Melayani anda statis folder:

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

Ini akan menunjukkan kepada anda yang port statis folder yang disajikan, hanya menavigasi ke host seperti:

http://localhost:3000

Anda don't perlu menggunakan NPM modul untuk menjalankan simple server, ada's sangat kecil perpustakaan yang disebut "NPM Gratis Server" untuk Node:

• NPM Server Gratis di GitHub

50 baris kode, output jika anda meminta sebuah file atau folder dan memberikan warna merah atau hijau jika gagal untuk bekerja. Kurang dari 1KB dalam ukuran (minified).

Saya menemukan menarik perpustakaan pada npm yang mungkin berguna untuk anda. It's disebut mime(npm install mime atau https://github.com/broofa/node-mime) dan dapat menentukan tipe mime dari file. Berikut ini's contoh dari sebuah webserver yang saya tulis ini:

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

Ini akan melayani setiap teks biasa, atau file gambar (.html, .css, .js, .pdf, .jpg, .png, .dan m4a .mp3 ini adalah ekstensi I've diuji, tetapi teori ini harus bekerja untuk segala sesuatu)

Developer Catatan

Berikut adalah contoh output yang saya punya dengan itu:

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

Melihat unescape fungsi dalam konstruksi jalan. Ini adalah untuk memungkinkan nama file dengan spasi dan karakter dikodekan.

Edit:

Node.js contoh aplikasi Node Chat memiliki fungsi yang anda inginkan. Dalam hal ini's README.textfile 3. Langkah apa yang anda cari.

step1

• membuat server yang merespon dengan hello world pada port 8002

step2

• membuat index.html dan melayani

step3

• memperkenalkan util.js
• mengubah logika sehingga setiap file statis disajikan
• show 404 dalam kasus tidak ada file yang ditemukan

step4

• tambahkan jquery-1.4.2.js
• tambahkan client.js
• mengubah index.html meminta pengguna untuk panggilan

Berikut ini adalah server.js

Berikut ini adalah util.js

Cara yang saya lakukan itu adalah untuk pertama-tama install node statis server secara global melalui

npm install node-static -g

kemudian arahkan ke direktori yang berisi file html anda dan mulai statis server dengan statis.

Pergi ke browser dan ketik localhost:8080/"yourHtmlFile".

Pada dasarnya menyalin jawaban yang diterima, tapi menghindari membuat file js.

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

Ternyata sangat convinient.

Update

Sebagai versi terbaru dari Express, melayani-statis telah menjadi terpisah middleware. Gunakan ini untuk melayani:

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

Install melayani-statis pertama.

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

Saya pikir anda mencari ini. Di index.html hanya mengisinya dengan normal html - apa pun yang anda ingin membuat di atasnya, seperti:

    <h1>Hello world</h1>

Saya menggunakan kode di bawah ini untuk memulai sebuah web server sederhana yang membuat default file html jika tidak ada file yang disebutkan dalam Url.

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

Itu akan membuat semua js, css dan file gambar, bersama dengan semua konten html.

Setuju pada pernyataan "Tidak ada content-type adalah lebih baik daripada salah satu"

I'm tidak yakin jika ini adalah apa yang anda inginkan, namun, anda dapat mencoba mengubah:

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

untuk ini:

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

Ini akan memiliki browser client menampilkan file html bukan teks biasa.

Sedikit lebih verbose express 4.x versi, tetapi yang menyediakan daftar direktori, kompresi, caching dan permintaan log in minimal jumlah baris

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

Anda hanya bisa mengetik mereka dalam shell anda sh npx melayani

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