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
-
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.cssI 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
4 Answers
Reset to default 2I 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>