How to properly structure full-stack project which use React?

Question

I want to create advanced full-stack project with React on the client-side and Express.js on the server-side. Which folder structure practices is the best? I want to keep it simple. The project may contain TypeScript, E2E and unit tests and it will communicate with server-side API and use Socket.io for real-time integration. I want to keep one node_modules file and one package.json, too, if possible.

Answer 1

I want to keep one node_modules file and one package.json, too, if possible

React app running inside a browser and NodeJS based Express will have different dependencies. Dev dependencies will have some similarities like Typescript but production dependencies will be dractically different. You can try keeping the same testing framework like Jest for both client and backend but the actual testing libraries that Jest has to drive will be different requiring different Jest config settings. Typescript compiler settings can be different.

All that makes having one node-modules and package.json impractical so you need two projects in client and backend (or server) subdirectories.

On the other hand the two projects need to be tightly integrated with each other allowing seamless client-backend debugging covering even production build etc. So both need to be under umbrella of a single top-level project, tipically called workspace.

Would suggest having look at crisp-react. I'm the author.