.htaccess Open main page if file or folder doesn't exist, but keep URL + URL Routing

Question

I read through a lot of similar topics, but didn't find the right answer, so please help me.

Let's say the user types in a non-existing sub directory to my webpage:

www.example.com/subpage-1

What I want to achieve:

I want my mainpage (www.example.com - actually with hidden index.html) to open, but keep the URL unchanged with the non-existing subpage (www.example.com/subpage-1).

The reason why I need it: I have the website only with the main site (index.html), and everything is controlled via JavaScript dynamically.

I want to introduce sub pages - but I want to use only my main index.html site with JS to control it. (Just like a single page application.)

So when the user enters the URL www.example.com/subpage-1, my main site opens, but since the URL is kept unchanged, the JS script can check the URL, see, that subpage-1 is requested, and generate the right content for it (if subpage-1 is supported, of course).

Also that could be a SEO-friendly solution, since I could provide Google a sitemap with the available subpages as well - however everything would be controlled via the same index.html and JS.

How can I achieve it?

What I found so far:

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)$ index.html?url=$1 [QSA,L]

My problem with this is that it opens the main page every time, I can't find the query (?url=) anywhere, so I can't use it.

---

Also a problem what I don't know how to handle: Let's say the user enters www.example.com/subpage-1 and it's working fine since my JS script handles "subpage-1".

But what if

www.example.com/non-existing-subpage 

is entered? With the solution above it would open the main page again, but JS can't load any content for it. I still want 404 for all of the non existing subpages. How can I achieve it?

Answer 1

RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.+)$ index.html?url=$1 [QSA,L]

My problem with this that however it opens the main page every time, I can't find the query (?url=) anywhere, so I can't use it.

This is an internal rewrite on the server. Consequently, the url URL parameter (present only on the internal rewrite) is only available to a server-side script, not client-side JavaScript. The browser/client only sees the response from the server - it is not aware of what file produced that response. However, client-side JavaScript can see what is present in the browser's address bar, which is accessible via the window.location object.

So, you can instead simplify the RewriteRule directive:

RewriteRule . index.html [L]

And in your JS you can read the requested URL-path from the window.location.pathname property. For example, if you request example.com/foo then the pathname property contains /foo (with a slash prefix) for you to act on accordingly in your script.

I still want 404 for all of the non existing subpages. How can I achieve it?

You can't if you are only using client-side JavaScript. A "404 Not Found" status is an HTTP response sent from the server.

The best you can do in client-side JS is to display what looks-like a "404 Not Found" message to the user and make sure you have a robots meta tag that prevents indexing. But this is still served with a 200 OK HTTP status. Search engines (ie. Google) will likely see this as a soft-404 (ie. a page that looks like a 404, but is served with a 200 OK status).

If you want to serve a 404 HTTP response status then the server would need to be aware of which are valid/invalid URLs.