web-dev-qa-db-fra.com

nodejs / express inclut un fichier js local

Voici ma structure de dossiers actuelle

css
   app.css
js
  app.js
node-modules
index.html
node-server.js
package.json

Le serveur de nœuds héberge index.html, mais je ne sais pas comment obtenir le app.js et app.css fichiers à charger.

index.html les charge avec:

<script src="js/app.js"></script>
<link rel="stylesheet" type="text/css" href="css/app.css"/>

Voici le message d'erreur:

Failed to load resource: the server responded with a status of 404 (Not Found)
2http://localhost:3000/css/app.css Failed to load resource: the server 
responded with a status of 404 (Not Found)

Je sais que je dois exiger ou charger un module ou quelque chose, je ne peux pas comprendre quoi.

Merci

javascripthtmlcssnode.jsexpress
13
NorCalKnockOut

Raison Node.Js ne gère pas le contenu statique seul, les routes doivent être définies pour servir le contenu statique via Node.

Solution (Manuel):

var express = require('express'),
    path = require('path'),
    app = express();

app.get('/index.html',function(req,res){
   res.sendFile(path.join(__dirname + '/index.html')); 
});

app.get('/css/app.css',function(req,res){
    res.sendFile(path.join(__dirname + '/css/app.css')); 
});

app.get('/js/app.js',function(req,res){
    res.sendFile(path.join(__dirname + '/js/app.js')); 
});

app.get('/', function(req, res) {
    res.redirect('index.html');
});

app.listen(8080);

Meilleure solution:

Structure du répertoire:

public
 css
   app.css
 js
  app.js
 index.html

CODE:

var express = require('express'),
    path = require('path'),
    app = express();

// Express Middleware for serving static files
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', function(req, res) {
    res.redirect('index.html');
});

app.listen(8080);
9
Nivesh

Comme Tomasz Kasperek l'a souligné, vous devez informer Express que vous avez l'intention d'héberger ces fichiers dans un répertoire statique. Ceci est techniquement appelé définition du middleware statique .

Cela devrait ressembler à ceci:

var express = require('express');
var app = express();

// first parameter is the mount point, second is the location in the file system
app.use("/public", express.static(__dirname + "/public"));

C'est super simple et je vous suggère de choisir une sorte de dossier public, plutôt que de prendre la peine de rendre statiques des fichiers et des dossiers spécifiques.

Ensuite, les fichiers seraient simplement référencés ainsi à partir de la racine index.html:

<link href="public/css/reset.css" rel="stylesheet" type="text/css">

J'espère que cela vous aide!

8
James Taylor

Je l'ai fait fonctionner en utilisant cette syntaxe

app.use(express.static('public'));

Copiez les fichiers css et js sous le répertoire "public" puis ajoutez la référence dans le fichier index.html

<link rel="stylesheet" href="/css/reset.css">
0
ajup