React + backend - project structure when sharing code

Question

I really like the folder structure as can be seen here when dealing with a React frontend and a some backend with express:

root
├── backend
|   ├── node_modules
         


        

Answer 1

1. Having separate sub-projects for frontend and backend makes perfect sense due to vastly different dependencies. Mixing it up increases disk space consumption in production deployments and goes against security guidelines. Your folder structure is reasonable (except for public/ subfolders I'm unsure about, maybe I'm missing something).

2. The approach import { myFunction } from @shared/myFile; is fine. Just don't use CRA.

3. For a project with a single frontend and a single backend there is no need for a shared\ top-level folder because the frontend is the only source of 'UI truth' (e.g. the source of types and components related to UI) that is consumed by the frontend and the backend is the only source of 'API truth' consumed by both frontend and backend. With this arrangement only @backend/api_shared_stuff needs to be shared.

4. Some links to trustful resources where project structures for full-stack React development are explained would be really helpful. On the one hand, usually project authors have to explain plenty of other things and on the other hand keep the documentation (typically a README) reasonably concise. You may find that providing a justification/explanation why the subdirectory structure is this and not that was not the top priority.