express js not serving static files

Question

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('Welcome 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.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">//JQuery</script> <script src="https://maxcdn.bootstrapcdn.com/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.com/css/styles.css 404 (Not Found) GET example.com/javascript/nav.js

Does src="./javascript/nav.js" work? --- are you browsing to mysite.com/public/index? or mysite.com/index — Cody Geisler
– 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
– user5734311, Commented Dec 30, 2016 at 13:50
Hi @Cody G., './' does not work either. I am currently browsing on 'mysite.com/index'. The retruened 404 errors are like: 'mysite.com/css/styles.css' — compmonks
– compmonks, Commented Dec 31, 2016 at 16:39

Williz · Accepted Answer · 2016-12-30 13:38:47Z

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.

compmonks · Accepted Answer · 2016-12-31 17:09:39Z

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('Welcome 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! ;)

JSEvgeny · Accepted Answer · 2016-12-30 22:16:36Z

1

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

answered Dec 30, 2016 at 22:16

JSEvgeny

2,8001 gold badge26 silver badges40 bronze badges

1 Comment

JSEvgeny Over a year ago

Well, it would work without adding ur app path. The main thing was about adding "/" in your paths. But writing your own answer and marking it as the correct one overlooking mine is of course the best practice...

wiksikoh · Accepted Answer · 2019-03-07 04:00:22Z

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.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">//JQuery</script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">//Bootstrap min</script> <script src="javascript/nav.js"></script> </head>

Collectives™ on Stack Overflow

express js not serving static files

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Related