Server side includes as a templating/layout technique - .htaccess

Question

I'm making a website for a company, and I wanted to use something like ASP.NET MVC layout pages to dynamically load the content into the layout, but the hosting provider used by the company doesn't support ASP.NET. I assumed they supported Node.js, because they said the only thing they didn't support was .NET, so I used a templating library called Embedded JavaScript Templates (http://ejs.co/) with Express.js, but then found out the hosting provider doesn't support Node, either.
Server side includes are definitely supported, but my question is can I use them to take the filename from the url where the user navigated, pass that into the server side include in the index.html page (the page I'm trying to use as the layout page) and have the web server inject the content where the include tag is? So far all the examples I've seen for server side includes show the file name entered as a literal, such as:
<!--#include virtual="physicians.html" -->
Whereas I want the file included to be determined by what the user entered when they navigated to the site. If it was http://website.com/physicians.html, then the index.html file should be loaded with "physicians.html" injected where the include was. Something like this (which obviously doesn't work):
<!--#include virtual="${REQUEST_URI}" -->
I also tried adding the following to the .htaccess file (note I am aware it doesn't enable server-side includes. I did enable SSI later and SSI was working, though not in the way I wanted it to as mentioned before):
<ifModule mod_rewrite.c>
Options +FollowSymLinks
IndexIgnore */*
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule (.*) index.html
</ifModule>
This came from http://krasimirtsonev.com/blog/article/deep-dive-into-client-side-routing-navigo-pushstate-hash. I used the above .htaccess configuration with his client-side library Navigo and some AJAX. Here's the JavaScript for loading content into the index.html file (/views is where the partial views are stored):
function loadViewContent(viewPath)
{
$('#main-content').load(viewPath, navSetActive);
}
var root = "http://www.caduceuscorporation.com";
var router = new Navigo(root);
router.on({
'/': loadViewContent.bind(this, "views/home.html"),
'index.html': loadViewContent.bind(this, "views/home.html"),
'/:page': function(params) {
loadViewContent("views/" + params.page + ".html");
}
})
.resolve();
It works great, except if I enter an invalid filename then it goes into an endless loop of loading index.html within itself. What the .htaccess configuration is doing is if the path is invalid, the server sends back the content for index.html, hence the infinite loop of index.html loading itself within itself.
Is there a way to use server-side includes to load content based on the URL the user entered, rather than a predetermined file? Or is there a different .htaccess configuration I need to use? I hope I have made it clear what I am trying to do. If SSI or a different .htaccess configuration doesn't work, I guess I'll have to use PHP maybe. I know the hosting provider supports that for certain.

Answer 1

I found a solution that works almost exactly like ASP.NET MVC layout pages, which is basically what I was asking for in my original question, but uses server-side includes (SSI) instead. I first had to figure out the right syntax for entering the variable name into the virtual parameter of the include tag. In my case, it should look like this:
<!--#include virtual="views${REQUEST_URI}.html" -->
And it should be entered into the "layout page" (in my case, index.html) where you want the "partial view" page to appear. So if I enter an address like https://example.com/physician, the server will translate "physician" to "views/physician.html" as the local relative path (since the views directory in my local web root is where my views are stored) and the content of that file will be inserted into index.html where the include tag is.
There's one more step. I modified my .htaccess file to look like this:
<ifModule mod_rewrite.c>
RewriteEngine on
Options +Includes
AddHandler server-parsed .html
IndexIgnore */*
RewriteCond %{DOCUMENT_ROOT}/views%{REQUEST_URI}.html -f
RewriteRule .* index.html
RewriteRule ^/$ index.html
</ifModule>
RewriteCond with the -f flag tells the server that if there is a file in the path listed after RewriteCond, then apply the RewriteRule following the RewriteCond. The DOCUMENT_ROOT after RewriteCond is necessary, because when using -f, relative paths don't work.
RewriteRules return a page based on the path the user entered into her browser. They take a regular expression matching the path the user entered. The first RewriteRule has the regular expression .*, which matches any path the user entered. But the RewriteCond before it tells the RewriteRule to only be applied when the file in the path the user entered exists in the views folder on the server. If not, the first RewriteRule is not applied. Otherwise, the server will send back index.html with the include tag replaced by the page the user entered, as described above. The final RewriteRule only matches /, otherwise there would be no way to go to the website root.
I actually put some conditional tags into my index.html file surrounding the include tag:
<!--#if expr="${REQUEST_URI} != '/'" -->
<!--#include virtual="views${REQUEST_URI}.html" -->
<!--#else -->
<!--#include virtual="views/home.html" -->
<!--#endif -->
This way, the home page can be loaded when the user goes to the website root, or otherwise the user couldn't access the home page without entering /home.
Resources I used:
https://httpd.apache.org/docs/trunk/howto/ssi.html (Apache SSI Tutorial)
RewriteRule htaccess if a file exists (Stack Overflow post)