What's the difference between app.use and app.get with express.static?

NOTE: Turns out my issue isn’t the middlware express.static(), but rather the difference between app.use() and app.get(). This question answers it perfectly (way better than the express API docs!):

Difference between app.use and app.get in express.js

I understand the difference between app.use(‘/’) and app.get(‘/’) to be that the latter only serves HTTP GET requests to that endpoint, while the former serves ALL HTTP requests to that endpoint.

I also understand that express.static middleware serves static pages from a directory path to an endpoint.

What I don’t follow is why this:

app.get('/', express.static(__dirname + '/public')

Serves only the first page requested, and not any of the ref= or src= link/script pages referenced by the requested page. For example, here are two morgan traces responding to a simple index.html page that has a css link to file ‘style.css’

1) Server request trace using app.use(‘/’)

Server listening on 0.0.0.0:8080
GET / 200 6.258 ms - 444
GET /style.css 304 2.842 ms - -

2) Server request trace using app.get(‘/’)

Server listening on 0.0.0.0:8080
GET / 304 5.131 ms - -
GET /style.css 404 2.990 ms - 22

404???

How is it that even though the browser sent a GET request to ‘/’, app.get(‘/’) failed to serve the css, but app.use(‘/’) succeeded.

What detail am I missing with app.get(‘/’) or express.static?

Thanks in advance,
PT

Here’s the simple, simple code:

app.js:

var morgan = require('morgan'),
    express = require('express'),
    app = express(),
    server = require('http').Server(app);
app.use(morgan('dev'));

   // Uncomment .get or .use, but not both

   // this only serves index.html, not style.css when I nav to localhost:8080/
   //app.get('/', express.static(__dirname + '/pub'));

   // this serves both pages when I nav to localhost:8080/
   app.use('/', express.static(__dirname + '/pub'));

server.listen(8080);

And here’s the html…

index.html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" rel="nofollow noreferrer noopener">
  </head>
</html>

Path:

/app.js
/pub/index.html
/pub/style.css

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

app.get('/', handler) is “add / to routing table, and when http GET request arrives call handler”

app.use(middlevare) is “add middlevare to the stack”.

“middleware” is a function which accepts (request, response, next), next middleware is explicitly called by previous one with next()

express.static() returns middleware – specifically, a function that checks path of request and streams content of a corresponding file to response. If you add it using app.get('/') it’s never called for non-“/” routes

Solution 2

The short answer is app.use('/', express.static(__dirname + '/public')) will match any path that begins with /. This means that anything like/about and /contact are included. However, app.get('/', express.static(__dirname + '/public')) will match only the specific route /. So, /about and /contact, for example, won’t be included.

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply