admin管理员组

文章数量:1355570

I realise that this is a typical question yet after reading similar issues I could not get any solution to work and properly serve my static files with express.

My app folder structure looks like this:

..
-bin
-lib
-run
-etc
-node-modules
-public
--css
---styles.css
---svg.css
--images
---Loading.gif
--javascript
---nav.js
--favicon.ico
--index.html
app.js

My app.js should create a server with express and serve the static files in the 'public' folder. But it seems to only find the 'index.html'.It looks like this:

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

app.set('port', 13245);
app.use(express.static(path.join(__dirname, 'public')));

var server = app.listen(app.get('port'), function() {
    var port = server.address().port;
    console.log('Wele to the planet on port : ' + port);
});

Finally, my index.html file has a header like this:

<head>
<title>...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/styles.css" />
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="apple-touch-icon" sizes="120x120" href="images/Loading.gif"/>
<link rel="apple-touch-icon" sizes="152x152" href="images/Loading.gif"/>
<link rel="stylesheet" href=".3.7/css/bootstrap.min.css">
<script src=".1.1/jquery.min.js">//JQuery</script>
<script src=".3.7/js/bootstrap.min.js">//Bootstrap min</script>
<script src="javascript/nav.js"></script>
</head>

but css and js files do not seem to be served. It may be me but I don't see what I did wrong so just wondering.

the errors I get are

GET example/css/styles.css 404 (Not Found)
GET example/javascript/nav.js

I realise that this is a typical question yet after reading similar issues I could not get any solution to work and properly serve my static files with express.

My app folder structure looks like this:

..
-bin
-lib
-run
-etc
-node-modules
-public
--css
---styles.css
---svg.css
--images
---Loading.gif
--javascript
---nav.js
--favicon.ico
--index.html
app.js

My app.js should create a server with express and serve the static files in the 'public' folder. But it seems to only find the 'index.html'.It looks like this:

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

app.set('port', 13245);
app.use(express.static(path.join(__dirname, 'public')));

var server = app.listen(app.get('port'), function() {
    var port = server.address().port;
    console.log('Wele to the planet on port : ' + port);
});

Finally, my index.html file has a header like this:

<head>
<title>...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/styles.css" />
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="apple-touch-icon" sizes="120x120" href="images/Loading.gif"/>
<link rel="apple-touch-icon" sizes="152x152" href="images/Loading.gif"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js">//JQuery</script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js">//Bootstrap min</script>
<script src="javascript/nav.js"></script>
</head>

but css and js files do not seem to be served. It may be me but I don't see what I did wrong so just wondering.

the errors I get are

GET example./css/styles.css 404 (Not Found)
GET example./javascript/nav.js
  • javascript
  • node.js
  • express
Share Improve this question edited Dec 31, 2016 at 16:55 pmonks asked Dec 30, 2016 at 13:15 pmonkspmonks 65710 silver badges25 bronze badges 3
  • Does src="./javascript/nav.js" work? --- are you browsing to mysite./public/index? or mysite./index – Cody Geisler Commented Dec 30, 2016 at 13:23
  • Using your exact setup, if I go to http://localhost:13245/css/styles.css I will see the contents of that file. What happens when you do that? – user5734311 Commented Dec 30, 2016 at 13:50
  • Hi @Cody G., './' does not work either. I am currently browsing on 'mysite./index'. The retruened 404 errors are like: 'mysite./css/styles.css' – pmonks Commented Dec 31, 2016 at 16:39
Add a ment  | 

4 Answers 4

Reset to default 2

I have a similar setup as you. My app.js file is in the same folder as my public folder. And this works for me.

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

I don't think you need the __dirname and join, since __dirname references the directory that the current script is running from, but the public folder is already in your root directory.

Thanks for your answers. I solved this issue by adding the folder path where my application was in the urls.

So for

.MyAppFolder
-bin
-lib
-run
-etc
-node-modules
-public
--css
---styles.css
---svg.css
--images
---Loading.gif
--javascript
---nav.js
--favicon.ico
--index.html
app.js

I just had the same app.js file

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

app.set('port', 13245);
app.use(express.static(path.join(__dirname, 'public')));

var server = app.listen(app.get('port'), function() {
    var port = server.address().port;
    console.log('Wele to the planet on port : ' + port);
});

and urls in the index.html file are like this:

<link rel="stylesheet" href="/MyAppFolder/css/styles.css" />

Problem solved! ;)

Sipmly add this / before ur path to css and js files so ur link should look like this:

<link rel="stylesheet" href="/css/styles.css" />

I hope that will help

You can add a base href to you HTML document head.

<head>
<title>...</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<base href="http://localhost:13245" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="shortcut icon" href="favicon.ico"/>
<link rel="apple-touch-icon" sizes="120x120" href="images/Loading.gif"/>
<link rel="apple-touch-icon" sizes="152x152" href="images/Loading.gif"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.1/jquery.min.js">//JQuery</script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js">//Bootstrap min</script>
<script src="javascript/nav.js"></script>
</head>

本文标签： javascriptexpress js not serving static filesStack Overflow

版权声明：本文标题：javascript - express js not serving static files - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744008505a2575132.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。