I want a route called 'main' which will serve static files:
app.use('/main',express.static(__dirname+'/public'));
However when i do:
http://my.site.dev/main
The CSS and JS files won't download because it is trying to get them from
http://my.site.dev/css/styles.css
It should be getting the files from:
http://my.site.dev/main/css/styles.css
However, if I access my site with a trailing slash:
http://my.site.dev/main/
All files come through fine
Any ideas why not having a trailing slash messes up resources like CSS and JS from coming in?
This is an http problem, not just an Express-related challenge. The problem is discussed at:
Relative URLs and trailing slashes
http://www.bizcoder.com/the-mystery-of-the-trailing-slash-and-the-relative-url
If your URL is /main and your relative URL is css/style.css, it will resolve to /css/style.css; but if your URL is /main/, the relative URL resolves to /main/css/style.css.
My strategy for dealing with this is to redirect to add the trailing slash. Like this in Express:
app.all(/^\/main$/, function(req, res) { res.redirect('/main/'); });
app.use('/main/',express.static(__dirname+'/public'));
Or:
app.enable('strict routing');
app.all('/main', function(req, res) { res.redirect('/main/'); });
app.use('/main/',express.static(__dirname+'/public'));
How are the JS/CSS files requested in the HTML? If you're using strings like css/styles.css, then it will try to get them from the current directory. The directory for /main is / (just like /main.html would be), while the one for /main/ is /main/. A quick fix would be to use /main/css/styles.css in your HTML.
Related
my directories are as follows
//SE-Metro-Q
...<other files>
...contact.html
//SE-Metro-Q-Private
...server.js
Each directory is a separate set of webpages in their own website, and from a webpage in SE-Metro-Q-Private, I am redirecting to a webpage in SE-Metro-Q in a get request.
I have the following middleware:
app.use("/contactForm", express.static(path.join(__dirname, '/../SE-Metro-Q')));
And then the route:
app.get('/contactForm', (req, res) => {
res.sendFile('contact.html', { root: path.join(__dirname, '/../SE-Metro-Q') });
})
From what I understand when I go to /contactForm on the browser, it should only load contact.html, but instead it loads index.html from the SE-Metro-Q directory specified in the middleware above.
How can I modify it to only load contact.html?
express.static() serves a directory of static files; you've mounted your local path /../SE-Metro-Q to the /contactForm route. As such, Express will serve the entire directory off the /contactForm route.
If you want to only serve one file, remove your express.static() route entirely and explicitly respond with the file you want to serve on that route, just as you have in your second snippet.
I am using warp to serve a directory of static files. Unfortunately the relative links used in those static files can only be resolved, when I add a trailing slash to my path.
This is the code I use to serve the directory:
let route = warp::path("segment")
.and(warp::path("another"))
.and(warp::fs::dir("../path/to/static/files/folder"));
warp::serve(route).run(([0, 0, 0, 0], 3030)).await;
So now
0.0.0.0:3030/segment/another/ works fine
0.0.0.0:3030/segment/another does not work
In principle I would not mind this and just always use the URLs with trailing slashes, however when I "Add to Homescreen" the page from Safari on iOS (as a PWA) the trailing slash is ommited automatically.
So in order to work around this, I tried to create a redirect, and then add the trailing slash like this:
let redirect = warp::path("segment").and(warp::path("another")).and(warp::path::end())
.map(|| {
warp::redirect(Uri::from_static("0.0.0.0:3030/segment/another/"))
});
however this redirect filter only matches 0.0.0.0:3030/segment/another/. When I omit the warp::path::end() the redirect works for 0.0.0.0:3030/segment/another but now everything (for example 0.0.0.0:3030/segment/another/styles.css) gets redirected to 0.0.0.0:3030/segment/another/.
Is there a way to only redirect when the path does not end with a slash or a file extension (e.g. .html, .cssetc.)?
It might be that my overall aproach is incorrect here, too.
I have a code line:
app.use(express.static('public'));
for static files in public folder, but build a route:
app.get('/search/jobs', jobs.index);
The Expressjs is putting /search before url.
And I'm a getting error in console browser:
GET: http://localhost:5000/search/css/materialize.css
Any idea?
You need to use absolute paths in your html/css (e.g. /css/materialize.css). With relative paths (e.g. css/materialize.css) the browser will look up the path relative to the current path/"directory" (/search in this case).
A very simple question but bothers me a lot.
what's the difference between the following two cases ?
index.html
- script src="script/a.js"
- script src="/script/a.js" // starting with slash
and why my server can serve this request (starts with slash)
app.get('/script/a.js', function(req, res){ // with slash
res.sendfile(__dirname + '/realfolder/script/a.js');
});
no matter the url src on client side is any case of those two cases I just mentioned ?
On the other hand, I always got 404 error if I serve the request in the following way (starts without slash)
app.get('script/a.js', function(req, res){ // without slash
res.sendfile(__dirname + '/realfolder/script/a.js');
});
In my opinion, the path starts from '/' means the root folder of application and the other means relative path from __dirname. And I couldn't understand why my server can't handle app.get('script/a.js') this request which is without slash in the beginning ?
Anything wrong ?
When a path starts with a slash / it means that it is an absolute path.
When it doesn't start with a slash, it is a relative path.
Lets see an example. Imagine that my hard disk has only the following folders:
main
subfolder1
subfolder2
lastfolder
Now imagine we are in folder subfolder2 and we want to load a file that is inside lastfolder. We can load it with a relative path:
lastfolder/file.txt
But we can also use an absolute path:
/main/subfolder2/lastfolder/file.txt
Both paths are correct, but the relative one can fail if we move to a different folder (for example if we are in subfolder1), while the absolute path will always be correct (if we don't modify the folders of course).
If I want to set up the directory .../whatever/stuff to be served statically, but referenced as http://example.com/mystuff, I tried doing this:
app.configure(function() {
app.use('/mystuff', _express.static(__dirname + "/whatever/stuff"));
app.use('/mystuff', _express.directory(__dirname + "/whatever/stuff"));
});
This mostly works, but if I reference a subdirectory of mystuff without a trailing slash, say http://example.com/mystuff/subdir, it redirects to the wrong place (http://example.com/subdir/), resulting in a 404. This is especially problematic with directory listings, since the directory middleware doesn't put a trailing slash on links to subdirectories.
Is there something I can do to get around this? (and is my syntax above correct?)
try this:
app.use('/mystuff*', ..);