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

Architecture is a tricky one, everyone has a different opinion and every option has pro and cons.

Personally I believe its best to separate the backend and frontend into sperate projects and keep them that way. Now as JavaScript/React/Node encourage component-based approaches a really nice way of sharing code between them is Bit.dev.

https://bit.dev

I am currently using it to share components and functions between three web apps and a few Node microservices.

A good structure for React app can be found here, this one works well and scales nicely:

https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af

As for Express, there are so many ways to structure the project but personally recommend a folder for your Routes, a folder for your Controllers, this is where the logic for Routes live. Then go from there. Check this link out:

https://www.freecodecamp.org/news/how-to-write-a-production-ready-node-and-express-app-f214f0b17d8c/

Depending on what your building you may not even need a full backend you can check out the JAMStack here for more info:

https://jamstack.org

I would consider separating them though as the project scales it makes it much easier to manage. You can release your front end on something like Netlify and then use something like AWS or Azure to host your Node/Express server.