CODEWITHSUNDEEP
javascriptnode.jsexpress
compmonks
compmonks

Reputation: 657

express js not serving static files

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

Upvotes: 3

Views: 9497

Answers (4)

wiksikoh
wiksikoh

Reputation: 73

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>

Upvotes: 0

compmonks
compmonks

Reputation: 657

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! ;)

Upvotes: 2

JSEvgeny
JSEvgeny

Reputation: 2750

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

Upvotes: 1

Williz
Williz

Reputation: 309

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.

Upvotes: 2

Related Questions