Optimal Directory Layout for MERN Frontend and Backend as Sibling Folders

Frontend and Backend Development
1

I have a MERN project with a React frontend and an Express/Mongoose backend as sibling directories. Should each folder have its own package file and node dependencies?

Example structure:

/client
  /app
    mainView.jsx
  package.json
/server
  startServer.js
  /schemas
    productModel.js
  package.json
2

i reckon having indivdual package.json for each folder makes your life easier. seperated dependencies helps avoid nasty surprises when upgrading. gives you better control over what installs where.

3

Experience has shown that maintaining separate package.json files for the client and server often simplifies the development process when managing a MERN stack project. This isolation prevents dependency conflicts and provides the flexibility to adjust configurations specific to the environment. Although a unified package can work for smaller projects, separating the directories enables optimized build processes and easier troubleshooting when issues arise. Utilizing tools such as Yarn or npm workspaces can still offer shared functionality without the drawbacks of having one combined dependency list.

4

hey, ive been using separate config too. i feel its cleaner device by device even if it means duplicaitng some common settings. does anyone else feel its easier to debug or are there hidden issues with shared env vars?

5

i lean towards seperate package.jsons for planning ahead. its easier to scale each side independently and debug issues. if your app stays small, a unified file might work, but in the long run, separate setups save you headaches.