Express-js can't GET my static files, why?

I've reduced my code to the simplest express-js app I could make:

var express = require("express"),
app = express.createServer();
app.use(express.static(__dirname + '/styles'));
app.listen(3001);


My directory look like this:

static_file.js
/styles
default.css


Yet when I access http://localhost:3001/styles/default.css I get the following error:

http://localhost:3001/styles/default.css

Cannot GET / styles /
default.css


I'm using express 2.3.3 and node 0.4.7. What am I doing wrong?

express 2.3.3

node 0.4.7

14 Answers
14

Try http://localhost:3001/default.css.

http://localhost:3001/default.css

To have /styles in your request URL, use:

/styles

app.use("/styles", express.static(__dirname + '/styles'));


Look at the examples on this page:

//Serve static content for the app from the "public" directory in the application directory.

// GET /style.css etc
app.use(express.static(__dirname + '/public'));

// Mount the middleware at "/static" to serve static content only when their request path is prefixed with "/static".

// GET /static/style.css etc.
app.use('/static', express.static(__dirname + '/public'));


I have the same problem. I have resolved the problem with following code:

app.use('/img',express.static(path.join(__dirname, 'public/images')));
app.use('/js',express.static(path.join(__dirname, 'public/javascripts')));
app.use('/css',express.static(path.join(__dirname, 'public/stylesheets')));


Static request example:

http://pruebaexpress.lite.c9.io/js/socket.io.js


I need a more simple solution. Does it exist?

default.css should be available at http://localhost:3001/default.css

default.css

http://localhost:3001/default.css

The styles in app.use(express.static(__dirname + '/styles')); just tells express to look in the styles directory for a static file to serve. It doesn't (confusingly) then form part of the path it is available on.

styles

app.use(express.static(__dirname + '/styles'));

styles

/public

css

js

img

http://localhost:3001/css/default.css

In your server.js :

var express = require("express");
var app = express();
app.use(express.static(__dirname + '/public'));


You have declare express and app separately, create a folder named 'public' or as you like, and yet you can access to these folder. In your template src, you have put the relative path from /public (or the name of your folder destiny to static files). Beware of the bars on the routes.

This work for me:

app.use('*/css',express.static('public/css'));
app.use('*/js',express.static('public/js'));
app.use('*/images',express.static('public/images'));


to serve static files (css,images,js files)just two steps:

pass the directory of css files to built in middleware express.static

var express = require('express');
var app = express();
/*public is folder in my project directory contains three folders
css,image,js
*/
//css =>folder contains css file
//image=>folder contains images
//js =>folder contains javascript files
app.use(express.static( 'public/css'));


to access css files or images just type in url http://localhost:port/filename.css ex:http://localhost:8081/bootstrap.css

note: to link css files to html just type<link href="file_name.css" rel="stylesheet">


<link href="file_name.css" rel="stylesheet">


if i write this code

var express = require('express');
var app = express();
app.use('/css',express.static( 'public/css'));


to access the static files just type in url:localhost:port/css/filename.css
ex:http://localhost:8081/css/bootstrap.css

note to link css files with html just add the following line

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


I am using Bootstrap CSS, JS and Fonts in my application. I created a folder called asset in root directory of the app and place all these folder inside it. Then in server file added following line:

asset

app.use("/asset",express.static("asset"));


This line enables me to load the files that are in the asset directory from the /asset path prefix like: http://localhost:3000/asset/css/bootstrap.min.css.

asset

/asset

http://localhost:3000/asset/css/bootstrap.min.css

Now in the views I can simply include CSS and JS like below:

<link href="/asset/css/bootstrap.min.css" rel="stylesheet">


this one worked for me

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

app.use('/img',express.static(path.join(__dirname, 'public/images')));

app.use('/shopping-cart/javascripts',express.static(path.join(__dirname, 'public/javascripts')));

app.use('/shopping-cart/stylesheets',express.static(path.join(__dirname, 'public/stylesheets')));

app.use('/user/stylesheets',express.static(path.join(__dirname, 'public/stylesheets')));

app.use('/user/javascripts',express.static(path.join(__dirname, 'public/javascripts')));


Try accessing it with http://localhost:3001/default.css.

app.use(express.static(__dirname + '/styles'));


You are actually giving it the name of folder i.e. styles not your suburl.

What worked for me is:

Instead of writing app.use(express.static(__dirname + 'public/images')); in your app.js

app.use(express.static(__dirname + 'public/images'));

Simply write
app.use(express.static('public/images'));

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

i.e remove the root directory name in the path. And then you can use the static path effectively in other js files, For example:

<img src="/images/misc/background.jpg">


Hope this helps :)

In addition to above, make sure the static file path begins with / (ex... /assets/css)... to serve static files in any directory above the main directory (/main)

I find my css file and add a route to it:

app.get('/css/MyCSS.css', function(req, res)
res.sendFile(__dirname + '/public/css/MyCSS.css');
);


Then it seems to work.

.use()

express.static()

if your setup

myApp
|
|__ public
| |
| |__ stylesheets
| | |
| | |__ style.css
| |
| |___ img
| |
| |__ logo.png
|
|__ app.js


then,

put in app.js

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


and refer to your style.css: (in some .pug file):

link(rel='stylesheet', href='/static/stylesheets/style.css')


Serving static files in Express

To serve static files such as images, CSS files, and JavaScript files, use the express.static built-in middleware function in Express.

express.static

The function signature is:

express.static(root, [options])


The root argument specifies the root directory from which to serve static assets.

For example, use the following code to serve images, CSS files, and JavaScript files in a directory named public:

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


Now, you can load the files that are in the public directory:

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html


Express looks up the files relative to the static directory, so the name of the static directory is not part of the URL.

To use multiple static assets directories, call the express.static middleware function multiple times:

express.static

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


Express looks up the files in the order in which you set the static directories with the express.static middleware function.

express.static

NOTE: For best results, use a reverse proxy cache to improve performance of serving static assets.

To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static function, specify a mount path for the static directory, as shown below:

express.static

app.use('/static', express.static('public'))


Now, you can load the files that are in the public directory from the /static path prefix.

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html


However, the path that you provide to the express.static function is relative to the directory from where you launch your node process.

express.static

If you run the express app from another directory, it’s safer to use the absolute path of the directory that you want to serve:

app.use('/static', express.static(path.join(__dirname, 'public')))


Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.