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

Time:03-11

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?

CodePudding user response:

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.

  • Related