Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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">
  </head>
</html>

Path:

/app.js
/pub/index.html
/pub/style.css
like image 460
PeterT Avatar asked Nov 27 '14 02:11

PeterT


2 Answers

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.

like image 53
M.Z. Avatar answered Sep 28 '22 20:09

M.Z.


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

like image 39
Andrey Sidorov Avatar answered Sep 28 '22 18:09

Andrey Sidorov