React import all markdown files in subdirectory and generating routes

26 Views Asked by At

I'm trying to make a static website that displays lab instructions, each with their own unique route, based on the following file structure in a static site.

labs
|_modeling
|__basic
|___modeling1
|____modeling1.md
|__advanced
|___modeling2
|____modeling2.md
|_animating
|__animating1
|___animating1.md
etc

How would I go about automatically importing these markdown files and also getting their file path?

I tried accessing fs to get the entire directory but I can't access fs in react, nor any npm packages that I tried to install like glob. I can't figure out a way to get the entire directory either. All the solutions I found online used require.context() but I was wondering if there was a way to do it without using webpack?

Alternatively, would it be better to simply have a function that I run before building the site that creates react components and run that each time? I'm planning to host it on github pages using github actions so I don't know if that'll be more efficient than trying to do everything inside the react component itself

0

There are 0 best solutions below