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!):
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
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,
Here’s the simple, simple code:
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…
<!doctype html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css" rel="nofollow noreferrer noopener"> </head> </html>
/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.
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
The short answer is
app.use('/', express.static(__dirname + '/public')) will match any path that begins with
/. This means that anything like
/contact are included. However,
app.get('/', express.static(__dirname + '/public')) will match only the specific route
/contact, for example, won’t be included.
Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂