Background
I have a react web app with front-end only, that I build using the command react-scripts build. In order to route files without manually adding them to the code each time, I am using @react-file-based-routing/react-router-dom from npm.
I was wondering how this library works - how is it able to traverse the files in my project and add them to the router, and I wanted how to do something like this myself.
The Question
My question, therefore, is how can I for example create a simple react page that simply shows the names of all files in a certain directory from my source project (when again, it's front end only so from my understanding this information must be gathered in the build process.
For example, if originally I chose the directory mydir and it contains hello.txt, b.exe, file.mp4, when accessing mywebsite.com/showfiles it should contain simple html (optionally with css,js) with a list of these three files.
Side-Note: If you think this can be done with Node.js alone without react tools (and without including new tools like webpack!) it would be cool, though I doubt it.
From a frontend app only, I think it is possible using the file system API to browsers, but seems very limited. Seems it is also possible through chrome extensions, which has a specific API for that and, of course, requires user permissions.
Accessing file system from backend you have more options, like fs native module and serving a static file from a HTTP app. You can also send a map from the folder structure to the frontend and make a navigation in the frontend as a folder navigation.