How to break up HTML files into more manageable chunks - A-frame on Glitch

I am using a-frame in Glitch and I would like to break up my HTML docs into more manageable chunks. As one example, when I have a lot of assets in the <a-assets> tag it would be good to have that in a separate file, that's just one example though and I am looking for a general solution to separate what can be quite large files.

Normally (ie outside of Glitch) I would achieve this by changing the file name from .html to .php and then use a PHP include to reference a chunk of HTML that I save in a different file. For example I would have an HTML file with just the assets like so;

<a-assets>
<!-- all my images and mixins -->
...
</a-assets>

Save that in a folder called for example components and then reference it in my main file like so

<?php
include 'components/assets.html';
?>

I am unable to achieve this in Glitch however. When I change the index.html to index.php and then view the app I am shown the file directory rather than the app. I should say here that I am not familiar with PHP at all and discovered this solution online a few years ago, I do not use it in any other way.

So, it could be that this is not possible on Glitch (I have asked in their support forum) or maybe it is and I am doing something wrong?

If it's not possible, are there other ways (potentially using js?) that this same principle could be achieved? I have tried this w3 solution like so;

<!DOCTYPE html>
<html>
  <head>
    <title>Aframe - JS include test</title>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <script src="js/include.js"></script>
  </head>
  <body>
    <a-scene>
      <a-entity w3-include-html="components/test.html"><a-entity>
      <a-entity w3-include-html="components/test2.html"></a-entity>
    </a-scene>
    <script>
    includeHTML();
    </script>
  </body>
</html>

Referencing these 2 files as a test;

components/test.html

<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
<a-sky color="#ECECEC"></a-sky>

components/test2.html

<a-sphere position="-3 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>

and then the js/include.js file as follows

function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      } 
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
    }
  }
}

But this is not reliable, it seems to only load one file and even that seems buggy. I know that this is something to do with the way that a-frame loads the page/canvas in so I didn't really expect it to work at all. It is not as clean, reliable or straightforward as the PHP solution I use elsewhere.

Have other people encountered this issue? It would be good to understand how people handle this.

If you need any more info from, please let me know.

Solution

On glitch, you can use similar functionality to php templating using serverside templating with handlebars. Here's a quick example:

https://glitch.com/edit/#!/a-frame-ss-handlebars-templates

The main file is views/index.hbs and it includes templates like 'head' and 'assets' which would allow you to break up your code.

<!DOCTYPE html>
<html>
  {{> head }}
  <body>
    <a-scene>
      {{> assets }}

      <a-entity id="poly" poly-api-obj="obj: #cycle-obj; mtl: #cycle-mtl" position="0 0 -5" scale="0.3 0.3 0.3"></a-entity>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9" shadow></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E" shadow></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D" shadow></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" shadow></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>