Can I customize the file structure for generated web-side components/pages?

Several developers have asked about reorganizing the component file structure on the web side.

And you absolutely can … after they get generated (or you create you own files). Simply move them and change the imports (or let VS Code update them). But, of course, that can become tedious and repetitive; and that’s where generators are meant to help.

While Redwood’s default file organization works for many, we realize that more control over where they get placed in the directory tree could be helpful.

Why might you want to change the component file structure?

Here are some dev comments:

I prefer to have my components nested by domain, so when I generated yarn rw g scaffold post, I would love an option to have them generate in ./web/src/components/post/*/** to keep things organized better as my list of components grows.

This would need to be supported for multiple fenerate commands (e.x. yarn rw g cell BlogPosts should have option for me to specify I want it to end up in a parent folder named components/blog/BlogPosts)


Also I would like to see everything grouped by domain, since domain could contain pages, layouts and componetns

From @peterp:

We generate a lot of React components in web/src/components. Each scaffold command generates 5 components.

This could become problematic over time, and some people like to nest components by domain. We should come up with a structure and workflow that allows generated React components to be nested.

There is an issue to discuss how one might change the generators to let you specify a path or some new directory structure here: Add option to nest components · Issue #340 · redwoodjs/redwood · GitHub

Please let us know in that issue how you might want to organize your web components.