'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:

Cannot GET / styles /
default.css

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

node.js express

Solution 1:^[1]

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?

Solution 2:^[2]

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

Solution 3:^[3]

default.css should be available at 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.

Solution 4:^[4]

In your server.js :

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

You have declared 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 added the relative path from /public (or the name of your folder destiny to static files). Beware of the bars on the routes.

Solution 5:^[5]

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:

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.

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

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

Solution 6:^[6]

What worked for me is:

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

Simply write 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 :)

Solution 7:^[7]

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">

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">

Solution 8:^[8]

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

Solution 9:^[9]

Webpack makes things awkward

As a supplement to all the other already existing solutions:

First things first: If you base the paths of your files and directories on the cwd (current working directory), things should work as usual, as the cwd is the folder where you were when you started node (or npm start, yarn run etc).

However...

If you are using webpack, __dirname behavior will be very different, depending on your node.__dirname settings, and your webpack version:

In Webpack v4, the default behavior for __dirname is just /, as documented here.
- In this case, you usually want to add this to your config which makes it act like the default in v5, that is __filename and __dirname now behave as-is but for the output file:
```
module.exports = {
   // ...
   node: {
     // generate actual output file information
     // see: https://webpack.js.org/configuration/node/#node__filename
     __dirname: false,
     __filename: false,
   }
};
```
- This has also been discussed here.
In Webpack v5, per the documentation here, the default is already for __filename and __dirname to behave as-is but for the output file, thereby achieving the same result as the config change for v4.

Example

For example, let's say:

you want to add the static public folder
it is located next to your output (usually dist) folder, and you have no sub-folders in dist, it's probably going to look like this

const ServerRoot = path.resolve(__dirname /** dist */, '..');
// ...
app.use(express.static(path.join(ServerRoot, 'public'))

(important: again, this is independent of where your source file is, only looks at where your output files are!)

More advanced Webpack scenarios

Things get more complicated if you have multiple entry points in different output directories, as the __dirname for the same file might be different for output file (that is each file in entry), depending on the location of the output file that this source file was merged into, and what's worse, the same source file might be merged into multiple different output files.

You probably want to avoid this kind of scenario scenario, or, if you cannot avoid it, use Webpack to manage and infuse the correct paths for you, possibly via the DefinePlugin or the EnvironmentPlugin.

Solution 10:^[10]

The problem with serving __dirname is that __dirname returns the path of the current file, not the project's file. Also, if you use a dynamic header, each page will look for the static files in a different path and it won't work. The best, for me, is to substitute __dirname for process.cwd() which ALWAYS donates the path to the project file.

app.use(express.static(process.cwd() + '/public'));

And in your project:

link rel="stylesheet" href="/styles/default.css"

See: What's the difference between process.cwd() vs __dirname?

Solution 11:^[11]

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.

Solution 12:^[12]

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.

Solution 13:^[13]

I was using

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

When there was no file in the public folder with name index.html.

I was getting the following error in the browser:

"Cannot GET /"

When I renamed the file to 'index.html', it works fine.

Solution 14:^[14]

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)

Solution 15:^[15]

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')

Solution 16:^[16]

Create a folder with 'public' name in Nodejs project
folder.
Put index.html file into of Nodejs project folder.
Put all script and css file into public folder.
Use app.use( express.static('public'));
and in index.html correct path of scripts to <script type="text/javascript" src="/javasrc/example.js"></script>

And Now all things work fine.

Solution 17:^[17]

static directory

check the above image(static directory) for dir structure

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


//  or

app.use("/", express.static(publicDirectoryPath))
app.use((req, res, next) => {
res.sendFile(path.join(publicDirectoryPath,'index.html'))

Solution 18:^[18]

Try './public' instead of __dirname + '/public'. Similarly, try process.cwd() + '/public'.

Sometimes we lose track of the directories we are working with, its good to avoid assuming that files are located where we are telling express where they are.

Similarly, avoid assuming that in the depths of dependencies the path is being interpreted the same way at every level.

Solution 19:^[19]

In your nodejs file

const express = require('express');
const app = express();

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

In your pug file

...
script(type="text/javascript", src="static/your_javascript_filename")
...

Note the "static" word. It must be same in nodejs file and pug file.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Daniel Kmak
Solution 2	Apichai
Solution 3	nbro
Solution 4	Basavaraj Hadimani
Solution 5	arsho
Solution 6
Solution 7	Ahmed Mahmoud
Solution 8	krishan
Solution 9
Solution 10	Suraj Rao
Solution 11	Sunil Lulla
Solution 12	Ahmed Mahmoud
Solution 13	Tyler2P
Solution 14	bigskier91
Solution 15	Bar Horing Amir
Solution 16
Solution 17
Solution 18	Ray
Solution 19	user1461451

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Webpack makes things awkward

Example

More advanced Webpack scenarios

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]

Solution 17:[17]

Solution 18:[18]

Solution 19:[19]