Best practices for structuring MERN stack project with separate client and server directories

Frontend
1

I’m working on a MERN application and trying to figure out the best way to organize my project folders. Currently I have my backend built with Express and Mongoose in one location, and my React frontend (created with create-react-app) in another.

My current backend structure:

- /database
-- product.js
- /node_modules
-- ...
- app.js
- package-lock.json
- package.json

My current frontend structure:

- /src
-- /styles
--- main.css
-- /views
--- HomePage.js
-- /pages
--- Dashboard.js
-- /store
--- appReducer.js
- /node_modules
-- ...
- main.js
- serviceWorker.js
- .gitignore
- package-lock.json
- package.json

I want to organize everything like this:

- /frontend
-- /src
-- main.js
-- serviceWorker.js
-- .gitignore
-- package-lock.json
-- package.json

- /backend
-- /database
--- product.js
-- /node_modules
--- ...
-- app.js
-- package-lock.json
-- package.json

I’m confused about a few things. How do I get both parts running when they’re in separate folders like this? Should each folder have its own package.json file and node_modules directory? What’s the proper way to handle this setup?

2

ya, separating them is a good idea! for each folder, yeah, you def need its own package.json and node_modules. i usually run two terminals - one for the frontend (npm start) and the other for backend (node app.js or nodemon). just ensure your CORS is configured right for api calls!

3

Your structure looks good - it’s pretty standard. Yes, you should keep separate package.json and node_modules for each directory since they’re doing different things with different dependencies. To simplify management, consider creating a root package.json with scripts to handle both apps. Add something like “dev”: “concurrently "npm run server" "npm run client"”, where the server script starts your backend folder with nodemon, and the client script starts the React dev server. This way, one command can get everything running while keeping things separate. For production, include build scripts that compile React and place the static files into your Express public folder. Ensure your backend serves those build files when deployed, typically using express.static middleware pointed at the frontend build folder.

4

Nice setup! Quick question - are you deploying these separately or together? That usually changes how I’d structure everything. And what do you think about using concurrently to run both servers during development?