Je veux exécuter un serveur HTTP très simple. Chaque demande GET example.com
doit recevoirindex.html
servie, mais en tant que page HTML standard (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 servir index.html
de page Web régulière?
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 m'oblige à écrire une get
ligne pour chaque fichier de ressources (CSS, JavaScript, images) que je souhaite utiliser.
Comment puis-je servir une seule page HTML avec quelques images, CSS et JavaScript?
Réponses:
Le serveur Node.js le plus simple est juste:
Vous pouvez maintenant exécuter un serveur via les commandes suivantes:
Si vous utilisez NPM 5.2.0 ou une version plus récente, vous pouvez l'utiliser
http-server
sans l'installer avecnpx
. Ce n'est pas recommandé pour une utilisation en production, mais c'est un excellent moyen de faire fonctionner rapidement un serveur sur localhost.Ou, vous pouvez essayer ceci, qui ouvre votre navigateur Web et active les requêtes CORS:
Pour plus d'options, consultez la documentation de
http-server
GitHub ou exécutez:Beaucoup d'autres fonctionnalités intéressantes et un déploiement simple et cérébral sur NodeJitsu.
Fourches
Bien sûr, vous pouvez facilement recharger les fonctionnalités avec votre propre fourche. Vous pourriez constater que cela a déjà été fait dans l'une des 800+ fourches existantes de ce projet:
Serveur léger: une alternative rafraîchissante automatique
Une bonne alternative à
http-server
islight-server
. Il prend en charge l'observation de fichiers et l'actualisation automatique et de nombreuses autres fonctionnalités.Ajouter au menu contextuel de votre répertoire dans l'Explorateur Windows
Serveur JSON REST simple
Si vous devez créer un serveur REST simple pour un projet prototype, alors json-server pourrait être ce que vous recherchez.
Éditeurs 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 changent.
J'utilise Live Server avec Visual Studio Code.
L' éditeur de texte open source Brackets comprend également un serveur Web statique NodeJS. Ouvrez simplement n'importe quel fichier HTML entre parenthèses, appuyez sur " Aperçu en direct " et il démarre un serveur statique et ouvre votre navigateur sur la page. Le navigateur ** s'actualisera automatiquement chaque fois que vous modifiez et enregistrez le fichier HTML. Cela est particulièrement utile lors des tests de sites Web adaptatifs. Ouvrez votre page HTML sur plusieurs navigateurs / tailles de fenêtres / appareils. Enregistrez votre page HTML et voyez instantanément si vos éléments adaptatifs fonctionnent car 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 sa nouvelle application PhoneGap . Il s'agit d'une application mobile générique qui peut charger les fichiers HTML5 à partir d'un serveur pendant le développement. C'est une astuce très astucieuse car vous pouvez désormais ignorer les étapes de compilation / déploiement lentes de votre cycle de développement pour les applications mobiles hybrides si vous modifiez des fichiers JS / CSS / HTML - ce que vous faites la plupart du temps. Ils fournissent également le serveur Web NodeJS statique (run
phonegap serve
) qui détecte les modifications de fichiers.Développeurs PhoneGap + Sencha Touch
J'ai maintenant largement adapté le serveur statique PhoneGap et l'application développeur PhoneGap pour les développeurs Sencha Touch et jQuery Mobile. Découvrez-le sur Sencha Touch Live . Prend en charge les codes --qr QR et --localtunnel qui procurent à votre serveur statique de votre ordinateur de bureau une URL en dehors de votre pare-feu! Des tonnes d'utilisations. Accélération massive pour les développeurs mobiles hybrides.
Développeurs de cadres Cordova + Ionic
Le serveur local et les fonctionnalités d'actualisation automatique sont intégrés à l'
ionic
outil. Exécutez simplement à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.la source
npm install live-server -g
si vous voulez la même chose, mais avec le rechargement automatique lorsqu'il détecte un changement de fichierhttp-server -a localhost
Vous pouvez utiliser Connect et ServeStatic avec Node.js pour cela:
Installez connect et serve-static avec NPM
Créez un fichier server.js avec ce contenu:
Exécuter avec Node.js
Vous pouvez maintenant aller à
http://localhost:8080/yourfile.html
la source
Découvrez cet essentiel . Je le reproduis ici pour référence, mais l'essentiel a été régulièrement mis à jour.
Mise à jour
L'essentiel gère les fichiers css et js. Je l'ai utilisé moi-même. L'utilisation de la lecture / écriture en mode "binaire" n'est pas un problème. Cela signifie simplement que le fichier n'est pas interprété comme du texte par la bibliothèque de fichiers et n'est pas lié au type de contenu renvoyé dans la réponse.
Le problème avec votre code est que vous renvoyez toujours un type de contenu "text / plain". Le code ci-dessus ne renvoie aucun type de contenu, mais si vous l'utilisez uniquement pour HTML, CSS et JS, un navigateur peut en déduire très bien. Aucun type de contenu n'est meilleur qu'un mauvais.
Normalement, le type de contenu est une configuration de votre serveur Web. Je suis donc désolé si cela ne résout pas votre problème, mais cela a fonctionné pour moi en tant que simple serveur de développement et j'ai pensé 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 joeytwiddle ou utiliser une bibliothèque comme Connect qui a des valeurs par défaut raisonnables. La bonne chose à ce sujet est qu'il est simple et autonome (pas de dépendances).
Mais je ressens votre problème. Voici donc la solution combinée.
la source
fs.exists()
c'est également obsolète maintenant. Attrapez l'erreur aufs.stat()
lieu de créer une condition de concurrence critique.Vous n'avez pas besoin d'exprimer. Vous n'avez pas besoin de vous connecter. Node.js fait http NATIVELY. Il vous suffit de renvoyer un fichier dépendant de la demande:
Un exemple plus complet qui garantit que les demandes ne peuvent pas accéder aux fichiers sous un répertoire de base et gère correctement les erreurs:
la source
node thisfile.js
. Il s'exécutera, écoutant les nouvelles connexions et renvoyant de nouveaux résultats, jusqu'à ce que A. soit fermé par un signal, ou B. qu'une erreur folle provoque en quelque sorte l'arrêt du programme.Je pense que la partie qui vous manque en ce moment est que vous envoyez:
Si vous souhaitez qu'un navigateur Web affiche le code HTML, vous devez le remplacer par:
la source
<style>
balise.Étape 1 (à l'intérieur de l'invite de commande [j'espère que vous allez dans votre dossier]):
npm install express
Étape 2: créer un fichier server.js
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
ounodemon server.js
Il existe désormais 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
https://www.npmjs.org/package/http-server
la source
La voie rapide:
Votre chemin:
la source
Plutôt que de traiter une instruction switch, je pense qu'il est plus pratique de rechercher le type de contenu dans un dictionnaire:
la source
Il s'agit essentiellement d'une version mise à jour de la réponse acceptée pour connect version 3:
J'ai également ajouté une option par défaut afin que index.html soit servi par défaut.
la source
Vous n'avez pas besoin d'utiliser de modules NPM pour exécuter un serveur simple, il y a 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 s'il a échoué pour fonctionner. Taille inférieure à 1 Ko (minifiée).
la source
var filename = path.join(process.cwd() + '/dist/', uri);
sur le serveur à partir du dossier dist . J'ai mis le codeserver.js
dedans et ça marche juste quand je tapenpm start
si vous avez un nœud installé sur votre PC, vous avez probablement le NPM, si vous n'avez pas besoin de NodeJS, vous pouvez utiliser le package serve pour cela:
1 - Installez le package sur votre PC:
2 - Servir votre dossier statique:
Il vous montrera quel port votre dossier statique est servi, accédez simplement à l'hôte comme:
la source
J'ai trouvé une bibliothèque intéressante sur npm qui pourrait vous être utile. Cela s'appelle mime (
npm install mime
ou https://github.com/broofa/node-mime ) et il peut déterminer le type mime d'un fichier. Voici un exemple de serveur Web que j'ai écrit en l'utilisant: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 en théorie, cela devrait fonctionner pour tout)
Notes aux développeurs
Voici un exemple de sortie que j'ai obtenu avec:
Remarquez la
unescape
fonction dans la construction du chemin. C'est pour permettre les noms de fichiers avec des espaces et des caractères encodés.la source
Éditer:
Exemple d'application Node.js Node Chat possède les fonctionnalités que vous souhaitez.
Dans son fichier README.textfile
3. L'étape est ce que vous recherchez.
Voici le server.js
Voici l' util.js
la source
.readFileSync
dans un rappel. Avec node.js, nous utilisons des E / S non bloquantes. Veuillez ne pas recommander deSync
commandes.La façon dont je le fais est d'installer d'abord le serveur statique de noeud globalement via
puis accédez au répertoire qui contient vos fichiers html et démarrez le serveur statique avec
static
.Accédez au navigateur et saisissez
localhost:8080/"yourHtmlFile"
.la source
Je pense que vous cherchiez cela. Dans votre index.html, remplissez-le simplement avec du code html normal - tout ce que vous voulez y rendre, comme:
la source
Copie de la réponse acceptée, mais en évitant de créer un fichier js.
Je l'ai trouvé très pratique.
Mise à jour
Depuis la dernière version d'Express, serve-static est devenu un middleware distinct. Utilisez-le pour servir:
Installez d'
serve-static
abord.la source
de w3schools
il est assez facile de créer un serveur de noeud pour servir n'importe quel fichier demandé, et vous n'avez pas besoin d'installer de paquet pour cela
http: // localhost: 8080 / file.html
servira file.html à partir du disque
la source
Vous pouvez simplement taper ceux dans votre shell
Repo: https://github.com/zeit/serve .
la source
J'utilise le code ci-dessous pour démarrer un serveur Web simple qui rend le fichier html par défaut si aucun fichier n'est mentionné dans l'URL.
Il rendra tous les fichiers js, css et image, ainsi que tout le contenu html.
Convenez de l'énoncé " Aucun type de contenu n'est meilleur qu'un mauvais "
la source
Je ne sais pas si c'est exactement ce que vous vouliez, cependant, vous pouvez essayer de changer:
pour ça:
Le client du navigateur affichera le fichier en html au lieu de texte brut.
la source
la source
Content-Type
devrait êtretext/html
, tel qu'il est défini de cette façon:Content-Type := type "/" subtype *[";" parameter]
.Une version 4.x express un peu plus détaillée mais qui fournit la liste des répertoires, la compression, la mise en cache et la journalisation des demandes dans un nombre minimal de lignes
la source
Une 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 que vous souhaitez simplement servir des images html / css / js / statiques comme le suggère votre question, installez simplement le serveur pushstate module ou similaire;
Voici un "one liner" qui va créer et lancer un mini site. Collez simplement ce bloc entier dans votre terminal dans le répertoire approprié.
Ouvrez le navigateur et accédez à http: // localhost: 3000 . Terminé.
Le serveur utilisera le
app
répertoire comme racine pour servir les fichiers à partir de. Pour ajouter des ressources supplémentaires, placez-les simplement dans ce répertoire.la source
npm install pushstate-server --save; touch server.js; echo "var server = require('pushstate-server');server.start({ port: 3000, directory: './' });" > server.js; node server.js
Il existe déjà d'excellentes solutions pour un simple
nodejs server
. Il existe une autre solution si vous en avez besoinlive-reloading
car vous avez apporté des modifications à vos fichiers.naviguer dans votre répertoire et faire
il vous ouvrira le navigateur avec le rechargement en direct.
la source
La fonction express sendFile fait exactement ce dont vous avez besoin, et comme vous voulez la fonctionnalité de serveur Web à partir du nœud, express est un choix naturel, puis servir des fichiers statiques devient aussi simple que:
en savoir plus ici: https://expressjs.com/en/api.html#res.sendFile
Un petit exemple avec un serveur Web express pour le nœud:
exécutez-le et accédez à http: // localhost: 8080
Pour développer cela afin de vous permettre de servir des fichiers statiques comme css et images, voici un autre exemple:
créez donc un sous-dossier appelé css, mettez-y votre contenu statique et il sera disponible dans votre index.html pour une référence facile comme:
Remarquez le chemin relatif dans href!
le tour est joué!
la source
La plupart des réponses ci-dessus décrivent très bien comment les contenus sont servis. Ce que je cherchais comme supplémentaire était la liste du répertoire afin que d'autres contenus du répertoire puissent être parcourus. Voici ma solution pour d'autres lecteurs:
la source
C'est l'une des solutions les plus rapides que j'utilise pour voir rapidement les pages Web
À partir de là, entrez simplement le répertoire de vos fichiers html et exécutez
puis changez l'appareil en paysage Nexus 7.
la source
La version la plus simple que j'ai rencontrée est la suivante. À des fins éducatives, il est préférable, car il n'utilise aucune bibliothèque abstraite.
Maintenant, allez dans le navigateur et ouvrez ce qui suit:
Ici
image.jpg
devrait être dans le même répertoire que ce fichier. J'espère que cela aide quelqu'un :)la source
Je peux également recommander SugoiJS, il est très facile à configurer et donne la possibilité de commencer à écrire rapidement et a de grandes fonctionnalités.
Jetez un œil ici pour commencer: http://demo.sugoijs.com/ , documentation: https://wiki.sugoijs.com/
Il a des décorateurs de traitement des demandes, des politiques de demande et des politiques d'autorisation décorateurs.
Par exemple:
la source
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 démarrer plus rapidement et simplement
Bien sûr, installez d'abord node.js. Plus tard:
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, j'ai posté pour comprendre comment fonctionne derrière)
la source