Menu
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
460
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.
53
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
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
