Serve page directory with plain HTML plus assets?

Support
1

Hello! I have a kind of an unusual use case, perhaps. I already have a bunch of HTML/JS “apps” that I have developed, which currently I just serve using React Router to navigate between different apps.

I wanted to use Grav on the front end of this, basically my goal is to continue to serve up these apps as HTML but to put some front matter (navigational pages and other auxilliary pages) around it and to do some user management so that different client users are only allowed access to these pages as needed.

So, although Grav is built around markdown I would like to side step that. I would perhaps use Markdown for the front page, but all of the sub-pages would just be the index.html for apps that I have already created.

My apps are almost entirely React-based, so the index.html of these are usually basically just a root div and a link to the the bundled javascript.

I tried just creating new directories under /user/pages with the HTML content but just creating a new subdirectory under “pages” doesn’t magically make the page appear, it seems that you need to have a default.md for the magic to happen?

I tried making a default.md which has HTML tags inside of it (copying the script references from my index.html) and it kind of worked – everything ran correctly – but none of the images or styles or other assets were served up correctly, all of the existing links from my HTML (or actually DOM nodes generated by javascript) are giving error 404’s because the relative links do not resolve to anything when served underneath Grav in this way

For example, imagine I have:

/user/pages/05.test/default.html
/user/pages/05.test/Art/cat.jpg

and the index.html contains <img src="Art/Cat.jpg"/>

If I run my own server using “pages” as the root, (e.g. with python -m http.server) then navigating to localhost:8001/05.test/default.html will display the picture of the cat, with “Art/Cat.jpg” being resolved to the absolute URL “localhost:8001/05.test/Art/cat.jpg”

If I try to view the same content within Grav, firstly the .html does not appear, so I create a default.md containing the same tag, then the page appears at localhost:8000/test (serving my grav directory this time with “php -S localhost:8000 system/router.php”)

But it appears with a broken image link, with the img pointing to the absolute path localhost:8000/Art/Cat.jpg.

There are two problems there, firstly is that the relative link Art/Cat should probably be relative to the “test” folder, and it’s not. I’m not really sure why it behaves that way. The second is that even if it was relative to /test, i.e. localhost:8000/test/Art/Cat.jpg, that’s also an error 404, because Grav does not seem to serve up the files from underneath the page directory in that way.

Is there a way that I can make grav work the way I want, and just serve up the contents of a page directory “as is”? Again, I could just serve the directory plain, e.g. from Apache, which is what I’m doing now, but I want Grav for the extra organizational structure such as user accounts and permissions.

Thanks!

2

I have figured out how to get about 90% of the way toward answering my own question about how to serve existing HTML/JS and other assets copied under a page directory, mostly by poking around in the admin UI.

  • Pages --> Page --> Advanced --> Routable = Enabled

By doing this, a subdirectory like the “/user/pages/05.test/Art” mentioned earlier accessible as “test/art”

  • Advanced --> Force Lowercase URLs = No

Otherwise even though the directory is called Art, it won’t accept “Art” in the URL to access it, only “art”, so the links are all broken.

  • Content --> Redirect Trailing Slash = NO

allows you to go to, e.g. localhost:8000/test/ without it turning it back into localhost:8000/test.

The trailing slash is needed because otherwise a relative URL would not be underneath “test”.

At this point, if I navigate to “localhost:8000/test/” it will serve up the page with the cat image correctly

Unfortunately, if I follow the link at the top of the page it goes to “localhost:8000/test”, and without the trailing slash, the relative image link of “Art/Cat.jpg” will resolve to "“localhost:8000/Art/Cat.jpg”, so I need the trailing slash in the URL to make the relative URL resolve to "“localhost:8000/test/Art/Cat.jpg”

That’s the last step that I’m still puzzled about, is how to convince Grav to keep the trailing slash no the end of the URL when I navigate to the page link. I have tried options like “Append URL Extension” and setting that to “/”, but that doesn’t do anything.

If anyone has any ideas of how to make the page link for “test” go to “localhost:8000/test/” with the trailing slash still present, please let me know!