Utiliser node.js comme un simple serveur Web
Je veux exécuter un serveur HTTP très simple. Chaque demande GET adressée à example.com devrait recevoir index.html mais servie comme une page HTML normale (c'est-à-dire la même expérience que lorsque vous lisez des pages Web normales).
En utilisant le code ci-dessous, je peux lire le contenu de index.html. Comment puis-je utiliser index.html comme page Web normale?
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);
Une suggestion ci-dessous est compliquée et nécessite l’écriture d’une ligne get pour chaque fichier de ressources (CSS, JavaScript, images) que je souhaite utiliser.
Comment puis-je servir une seule page HTML avec des images, CSS et JavaScript?
Vous pouvez utiliser Connect et ServeStatic avec Node.js pour cela:
Installer connect et serve-static avec NPM
$ npm install connect serve-staticCréez un fichier server.js avec ce contenu:
var connect = require('connect'); var serveStatic = require('serve-static'); connect().use(serveStatic(__dirname)).listen(8080, function(){ console.log('Server running on 8080...'); });Exécuter avec Node.js
$ node server.js
Vous pouvez maintenant aller à http://localhost:8080/yourfile.html
Le serveur Node.js le plus simple est simplement:
_$ npm install http-server -g
_Vous pouvez maintenant exécuter un serveur via les commandes suivantes:
_$ cd MyApp
$ http-server
_Si vous utilisez NPM 5.2.0 ou plus récent, vous pouvez utiliser _http-server_ sans l’installer avec npx. Ceci n'est pas recommandé pour une utilisation en production, mais constitue un excellent moyen de faire fonctionner rapidement un serveur sur localhost.
_$ npx http-server
_Vous pouvez également essayer ceci, ce qui ouvre votre navigateur Web et active les demandes CORS:
_$ http-server -o --cors
_Pour plus d'options, consultez le documentation pour _http-server_ sur GitHub , ou exécutez:
_$ http-server --help
_Beaucoup d'autres fonctionnalités de Nice et un déploiement cérébral simple à NodeJitsu.
Feature Forks
Bien sûr, vous pouvez facilement recharger les fonctionnalités avec votre propre fourche. Vous constaterez peut-être que cela a déjà été fait dans l’une des 800 fourchettes existantes de ce projet:
Light Server: une alternative d'actualisation automatique
Une alternative intéressante à _http-server_ est light-server . Il prend en charge l'observation de fichiers et l'actualisation automatique, ainsi que de nombreuses autres fonctionnalités.
_$ npm install -g light-server
$ light-server
_Ajouter au menu contextuel de votre répertoire dans l'Explorateur Windows
_ reg.exe add HKCR\Directory\Shell\LightServer\command /ve /t REG_EXPAND_SZ /f /d "\"C:\nodejs\light-server.cmd\" \"-o\" \"-s\" \"%V\""
_Simple JSON REST serveur
Si vous devez créer un simple serveur REST pour un projet prototype, alors json-server est peut-être ce que vous recherchez.
Editeurs de rafraîchissement automatique
La plupart des éditeurs de pages Web et des outils IDE incluent désormais un serveur Web qui surveillera vos fichiers source et actualisera automatiquement votre page Web lorsqu'ils changeront.
J'utilise Live Server avec le code Visual Studio.
L'éditeur de texte open sourceBrackets inclut également un serveur Web statique NodeJS. Ouvrez tout fichier HTML entre parenthèses, appuyez sur " Live Preview " pour démarrer un serveur statique et ouvrir votre navigateur à la page. Le navigateur ** s'actualisera automatiquement chaque fois que vous modifierez et enregistrez le fichier HTML. Ceci est particulièrement utile lorsque vous testez des sites Web adaptatifs. Ouvrez votre page HTML sur plusieurs navigateurs/tailles de fenêtre/périphériques. Enregistrez votre page HTML et voyez instantanément si vos éléments adaptatifs fonctionnent comme ils sont tous actualisés automatiquement.
Développeurs PhoneGap
Si vous codez une application mobile hybride , vous serez peut-être intéressé de savoir que l'équipe PhoneGap a intégré ce concept de rafraîchissement automatique avec son nouveau PhoneGap App) . Il s'agit d'une application mobile générique pouvant charger les fichiers HTML5 à partir d'un serveur pendant le développement. C'est un truc très astucieux, car vous pouvez maintenant ignorer les étapes de compilation/déploiement lentes de votre cycle de développement d'applications hybrides mobiles si vous modifiez des fichiers JS/CSS/HTML - ce que vous faites la plupart du temps. Ils fournissent également le serveur Web statique NodeJS (exécuté _phonegap serve_) qui détecte les modifications de fichier.
Développeurs PhoneGap + Sencha Touch
J'ai maintenant largement adapté le serveur statique PhoneGap et l'application de développement PhoneGap pour les développeurs Sencha Touch et jQuery Mobile. Découvrez-le à Sencha Touch Live . Prend en charge les codes --qr QR et --localtunnel qui envoient un proxy à votre serveur statique depuis votre ordinateur de bureau vers une URL à l'extérieur du pare-feu! Des tonnes d'utilisations. Accélération massive pour les développeurs mobiles hybrides.
Cordova + Ionic Développeurs de framework
Les fonctions de serveur local et d'actualisation automatique sont intégrées à l'outil ionic. Il suffit d’exécuter _ionic serve_ à partir du dossier de votre application. Encore mieux ... ionic serve --lab pour afficher des vues côte à côte à rafraîchissement automatique d'iOS et d'Android.
Découvrez ceci Gist . Je le reproduis ici pour référence, mais le Gist a été mis à jour régulièrement.
Serveur Web de fichiers statiques Node.JS. Mettez-le dans votre chemin pour lancer des serveurs dans n'importe quel répertoire, prend un argument de port optionnel.
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");
Mettre à jour
Le Gist gère les fichiers css et js. Je l'ai utilisé moi-même. L'utilisation de lecture/écriture en mode "binaire" n'est pas un problème. Cela signifie simplement que le fichier n'est pas interprété en tant que texte par la bibliothèque de fichiers et qu'il n'est pas lié au type de contenu renvoyé dans la réponse.
Le problème avec votre code est que vous retournez toujours un type de contenu de "text/plain". Le code ci-dessus ne renvoie aucun type de contenu, mais si vous ne l'utilisez que pour HTML, CSS et JS, un navigateur peut en déduire que tout va bien. Aucun type de contenu n'est meilleur qu'un mauvais.
Normalement, le type de contenu est une configuration de votre serveur Web. Donc, je suis désolé si cela ne résout pas votre problème, mais cela a fonctionné pour moi en tant que serveur de développement simple et pensait que cela pourrait aider d'autres personnes. Si vous avez besoin de types de contenu corrects dans la réponse, vous devez soit les définir explicitement comme le fait joeytwiddle, soit utiliser une bibliothèque telle que Connect, dotée de valeurs par défaut raisonnables. La bonne chose à ce sujet est qu’il est simple et autonome (pas de dépendances).
Mais je sens votre problème. Voici donc la solution combinée.
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");
Vous n'avez pas besoin d'exprimer. Vous n'avez pas besoin de vous connecter. Node.js fait http NATIVELY. Tout ce que vous avez à faire est de retourner un fichier dépendant de la demande:
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 exemple plus complet qui garantit que les demandes ne peuvent pas accéder aux fichiers situés sous un répertoire de base et gère correctement les erreurs:
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)
Je pense que la partie qui vous manque en ce moment est que vous envoyez:
Content-Type: text/plain
Si vous voulez qu'un navigateur Web rende le code HTML, vous devez le modifier en:
Content-Type: text/html
Etape 1 (Invite de commande intérieure [j'espère que vous avez cd dans votre dossier]): npm install express
Étape 2: Créez un fichier 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);
Veuillez noter que vous devez également ajouter WATCHFILE (ou utiliser nodemon). Le code ci-dessus est uniquement pour un serveur de connexion simple.
ÉTAPE 3: node server.js ou nodemon server.js
Il existe maintenant une méthode plus simple si vous souhaitez simplement héberger un serveur HTTP simple. npm install -g http-server
et ouvrez notre répertoire et tapez http-server
Le moyen rapide:
var express = require('express');
var app = express();
app.use('/', express.static(__dirname + '/../public')); // ← adjust
app.listen(3000, function() { console.log('listening'); });
à votre façon:
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);
Plutôt que de traiter avec une instruction switch, je pense qu'il est plus judicieux de rechercher le type de contenu dans un dictionnaire:
var contentTypesByExtension = {
'html': "text/html",
'js': "text/javascript"
};
...
var contentType = contentTypesByExtension[fileExtension] || 'text/plain';
Il s’agit essentiellement d’une version mise à jour de la réponse acceptée pour 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);
J'ai également ajouté une option par défaut pour que index.html soit servi par défaut.
Vous n'avez pas besoin d'utiliser de modules NPM pour exécuter un serveur simple, il existe une toute petite bibliothèque appelée " NPM Free Server " pour Node:
50 lignes de code, sort si vous demandez un fichier ou un dossier et lui donne une couleur rouge ou verte si elle échoue pour fonctionner. Moins de 1 Ko en taille (minified).
si vous avez un nœud installé sur votre PC, vous avez probablement le NPM, si vous n'avez pas besoin de trucs NodeJS, vous pouvez utiliser le paquet serve pour ceci:
1 - Installez le paquet sur votre PC:
npm install -g serve
2 - Servez votre dossier statique:
serve <path>
d:> serve d:\StaticSite
Il vous montrera quel port votre dossier statique est servi, naviguez simplement vers l'hôte de la manière suivante:
http://localhost:3000
J'ai trouvé une bibliothèque intéressante sur npm qui pourrait vous être utile. Il s'appelle mime (npm install mime ou https://github.com/broofa/node-mime ) et permet de déterminer le type de mime d'un fichier. Voici un exemple de serveur Web que j'ai écrit en l'utilisant:
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")
Cela servira n'importe quel fichier texte ou image ordinaire (.html, .css, .js, .pdf, .jpg, .png, .m4a et .mp3 sont les extensions que j'ai testées, mais cela devrait fonctionner en théorie pour tout)
Notes du développeur
Voici un exemple de résultat obtenu:
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
Notez la fonction unescape dans la construction du chemin. Ceci est pour permettre les noms de fichiers avec des espaces et des caractères codés.
La façon dont je le fais est d’abord d’installer le serveur statique de nœud globalement via
npm install node-static -g
accédez ensuite au répertoire contenant vos fichiers html et démarrez le serveur statique avec static.
Allez dans le navigateur et tapez localhost:8080/"yourHtmlFile".
Modifier:
Node.js exemple d'application Node Chat a les fonctionnalités souhaitées.
Dans README.textfile
3. Step est ce que vous recherchez.
étape 1
- créer un serveur qui répond avec hello world sur le port 8002
étape 2
- créer un index.html et le servir
étape 3
- introduire util.js
- changer la logique pour que tout fichier statique soit servi
- afficher 404 si aucun fichier n'est trouvé
étape 4
- ajouter jquery-1.4.2.js
- ajouter client.js
- changez index.html en demandant à l'utilisateur un pseudo
Voici le server.js
Voici le til.js
Fondamentalement, copier la réponse acceptée, mais en évitant de créer un fichier js.
$ node
> var connect = require('connect'); connect().use(static('.')).listen(8000);
Je l'ai trouvé très pratique.
Mise à jour
Depuis la dernière version d'Express, serve-static est devenu un middleware distinct. Utilisez ceci pour servir:
require('http').createServer(require('serve-static')('.')).listen(3000)
Installez serve-static en premier.
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);
Je pense que tu cherchais ça. Dans votre index.html, remplissez-le simplement avec du code html normal - tout ce que vous voulez afficher, comme:
<html>
<h1>Hello world</h1>
</html>
Je ne sais pas si c'est exactement ce que vous vouliez, cependant, vous pouvez essayer de changer:
{'Content-Type': 'text/plain'}
pour ça:
{'Content-Type': 'text/html'}
Le client du navigateur affichera le fichier au format HTML au lieu du texte brut.
J'utilise le code ci-dessous pour démarrer un serveur Web simple qui restitue le fichier HTML par défaut si aucun fichier n'est mentionné dans l'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);
Il rendra tous les fichiers js, css et image, ainsi que tout le contenu html.
D'accord sur la déclaration "Aucun type de contenu n'est préférable à un mauvais"
de w3schools
il est assez facile de créer un serveur de nœud pour servir tout fichier demandé, et vous n'avez pas besoin d'installer de paquet pour cela
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
servira file.html à partir du disque
Une version 4.x express légèrement plus détaillée mais qui fournit la liste des répertoires, la compression, la mise en cache et la journalisation des demandes en un nombre minimal de lignes
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 !")
Quantité folle de réponses compliquées ici. Si vous n'avez pas l'intention de traiter les fichiers/base de données nodeJS mais souhaitez simplement servir du code html/css/js/images statique comme votre question le suggère, installez simplement le module pushstate-server ou similaire;
Voici un "one liner" qui créera et lancera un mini site. Il suffit de coller ce bloc entier dans votre terminal dans le répertoire approprié.
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
Ouvrez le navigateur et accédez à http: // localhost: 30 . Terminé.
Le serveur utilisera le répertoire app comme racine pour servir les fichiers. Pour ajouter des ressources supplémentaires, placez-les simplement dans ce répertoire.
La plupart des réponses ci-dessus décrivent très bien comment le contenu est servi. Ce que je cherchais en plus était la liste du répertoire afin que d’autres contenus du répertoire puissent être consultés. Voici ma solution pour d'autres lecteurs:
'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));
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'
Il existe déjà de très bonnes solutions pour un simple nodejs server. Il existe une solution supplémentaire si vous avez besoin de live-reloading lorsque vous avez modifié vos fichiers.
npm install lite-server -g
naviguer dans votre répertoire et faire
lite-server
il ouvrira le navigateur pour vous avec le rechargement en direct.
La version la plus simple que j'ai rencontrée est la suivante. À des fins éducatives, il est préférable de ne pas utiliser de bibliothèques abstraites.
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);
Maintenant, allez dans le navigateur et ouvrez ce qui suit:
http://127.0.0.1/image.jpg
Ici image.jpg devrait être dans le même répertoire que ce fichier. J'espère que ça aide quelqu'un :)
C’est l’une des solutions les plus rapides que j’utilise pour visualiser rapidement les pages Web.
Sudo npm install ripple-emulator -g
A partir de là, entrez simplement le répertoire de vos fichiers HTML et lancez
ripple emulate
puis changez l'appareil en paysage Nexus 7.
Je peux également recommander SugoiJS, il est très facile à configurer et offre une option pour commencer à écrire rapidement et dispose de fonctionnalités exceptionnelles.
Jetez un coup d'oeil ici pour commencer: http://demo.sugoijs.com/ , documentation: https://wiki.sugoijs.com/
Il a des décorateurs traitant des demandes, des politiques de demande et des décorateurs de politiques d'autorisation.
Par exemple:
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")
}
}
}
C'est très facile avec les tonnes de bibliothèques présentes aujourd'hui. Les réponses ici sont fonctionnelles. Si vous voulez une autre version pour un démarrage plus rapide et simple
Bien sûr, installez d'abord node.js. Plus tard:
> # module with zero dependencies
> npm install -g @kawix/core@latest
> # 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
Voici le contenu de " https://raw.githubusercontent.com/voxsoftware/kawix-core/master/example/npmrequire/express-static.js " (vous n'avez pas besoin de le télécharger, i posté pour comprendre comment ça marche derrière)
// 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://express@^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")
local-web-server vaut vraiment le détour! Voici un extrait du readme:
serveur web local
Un serveur Web modulaire et maigre pour un développement rapide en pile complète.
- Prend en charge HTTP, HTTPS et HTTP2.
- Petit et 100% personnalisable. Chargez et utilisez uniquement le comportement requis par votre projet.
- Attachez une vue personnalisée pour personnaliser le mode de visualisation de l'activité.
- Interfaces de programmation et de ligne de commande.
Utilisez cet outil pour:
- Créez n'importe quel type d'application Web frontale (statique, dynamique, application à page unique, application Web progressive, React etc.).
- Prototypez un service principal (API REST, microservice, websocket, service d'événements envoyés par le serveur, etc.).
- Surveiller l'activité, analyser les performances, expérimenter une stratégie de mise en cache, etc.
Local-web-server est une distribution de lws fournie avec un "pack de démarrage" de middleware utile.
Synopsis
Ce paquet installe l'outil de ligne de commande ws (consultez le guide d'utilisation ).
Site web statique
Exécuter ws sans aucun argument hébergera le répertoire actuel en tant que site Web statique. En accédant au serveur, vous obtiendrez une liste de répertoires ou votre index.html, si ce fichier existe.
$ ws
Listening on http://mbp.local:8000, http://127.0.0.1:8000, http://192.168.0.100:8000
Tutoriel sur les fichiers statiques .
Ce clip présente un hébergement statique ainsi que deux formats de sortie de journal - dev et stats.
Application d'une seule page
Servir une application à page unique (une application avec routage côté client, par exemple une application React ou Angular est aussi simple que de spécifier le nom de votre page unique:
$ ws --spa index.html
Avec un site statique, les demandes de chemins d'accès SPA typiques (par exemple, /user/1, /login) renverraient 404 Not Found, car aucun fichier à cet emplacement n'existe. Cependant, en marquant index.html en tant que SPA, vous créez cette règle:
Si un fichier statique est demandé (par exemple, /css/style.css), veuillez le servir, sinon (par exemple, /login), servez le SPA spécifié et gérez la route côté client.
Réécriture d'URL et requêtes par proxy
Un autre cas d'utilisation courant consiste à transférer certaines demandes vers un serveur distant.
La commande suivante proxie les demandes de publication de blog à partir de tout chemin commençant par /posts/ à https://jsonplaceholder.typicode.com/posts/. Par exemple, une demande pour /posts/1 serait envoyée par proxy à https://jsonplaceholder.typicode.com/posts/1.
$ ws --rewrite '/posts/(.*) -> https://jsonplaceholder.typicode.com/posts/$1'
Ce clip illustre l'utilisation de --static.extensions ci-dessus pour spécifier une extension de fichier par défaut et de --verbose pour surveiller l'activité.
HTTPS et HTTP2
Pour HTTPS ou HTTP2, transmettez les indicateurs --https ou --http2 respectivement. Voir le wiki pour plus d'options de configuration et un guide sur la façon d'obtenir le "cadenas vert" dans votre navigateur.
$ lws --http2
Listening at https://mba4.local:8000, https://127.0.0.1:8000, https://192.168.0.200:8000