Menu
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.
586
React is one such front-end library that can build engaging user interfaces. Full stack react development refers to using React as a front-end development framework with a backend based on frameworks such as Node. js or Python.
Components are the building blocks of any react project. This folder consists of a collection of UI components like buttons, modals, inputs, loader, etc., that can be used across various files in the project. Each component should consist of a test file to do a unit test as it will be widely used in the project.
Overall, both Angular and React can be used to build large enterprise-grade applications effectively. It's often a good idea to go with your dedicated development team's option, or whichever it deems most suited for your project needs.
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.
66
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
