I just started experimenting with node & express, and am trying to load the content of various HTML files into a single web page with Ajax.
I want the URL shown in the address bar to reflect the actual file structure on my server; so for instance when a user clicks a link with href="posts/thePost.html", instead of actually going to that page, I use click(), preventDefault(), and Ajax to load the content in a div, then pushState() and window.onpopstate to make the address bar show the relative path of the file. I do not want to use the hash (#) symbol or queries (?=) or anything like that, I want normal URLs.
This works fine, but when I refresh the page, the file located at the URL (i.e. posts/thePost.html) is displayed instead of index.html with the loaded content. Is there a way to use node to fix this, maybe by intercepting the request and displaying the content of index.html instead? I've tried to search this but haven't been having any luck.
Sorry if this sounds confusing. In short, the behavior that I'm looking for is that no matter what URL the address bar shows when the page is refreshed, index.html should be served up instead.
That's rather easy to do:
function serveIndex(req, res) {
return res.sendfile('index.html');
}
app.get('*', serveIndex);
app.head('*', serveIndex);
You'll likely want to put this after your other routes so you don't end up clobbering them.