How to organise file structure of backend and frontend in MERN

问题

I have backend based on express + mongoose. File structure is:

- /models
-- item.js
- /node.modules
-- ...
- server.js
- package-lock.json
- package.json

And regular create-react-app based folder for front-end:

- /src
-- /assets
--- index.css
-- /components
--- Somecomponent.js
-- /containers
--- App.js
-- /reducers
--- somereducers.js
- /node.modules
-- ...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json

I want to use it in proper way together. I wanted to organise it this way:

- /client 
-- /src
...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json

- /server
- /models
-- item.js
- /node.modules
-- ...
- server.js
- package-lock.json
- package.json

At this stage I stuck. I can make it if client folder inside server folder or if server folder inside client. 1. But how to make it run when two folders are siblings? 2. What should be package.json and where node.modules should be (whether both server and client should have it's own package.json and modules?)

回答1:

The most basic structure would be to have a root folder that contains frontend and backend folders. Since you're talking about the MERN stack, you would have a package.json inside of your NodeJS backend environment and a package.json for your React side of things. Backend server and the frontend client are two totally separate things, so yes, they both have their own node_modules folders. On the backend, you'll probably have installed something like Express for your Node runtime, Mongoose for a more convenient way to talk to your MongoDB, etc, and on your frontend, you'll have your React as your frontend framework, Redux for state management, etc. Additionally, depending on what you have already listed inside of your package.json files, when you run npm install separately it will be installed in those two folders. If you want to install additional packages, just run npm install + "the name of the package" (without the '+' and without the quotes) inside of that particular folder where you need it (backend or/ and frontend).

I hope this was helpful. Check out the pics, especially the 2nd one.

App structure

Folder structure

UPDATE:

In development, I suggest installing two additional things:

1. npm i nodemon
2. npm i concurrently

Nodemon is going to track every file change and with concurrently you can start both your frontend and backend at the same time. For example, you could go to your package.json file in you backend folder and edit the start section, like this:

"scripts": {
    "start": "node app.js",   // whatever is your backend starting point
    "backend": "nodemon app.js",   // to start the node development server
    "frontend": "npm run start --prefix frontend", // it goes insede of the client folder and starts the React server
    "dev": "concurrently \"npm run backend\" \"npm run frontend\""  // with this command you'll be able to start them both at once
  }

If you kept the folder structure, installed all the dependencies (including the additional two I mentioned above), changed the package.json file on your backend, you'll be able to start them both with a simple command:

npm run dev

回答2:

Adding to the accepted answer, the folder structure division inside the frontend and backend is more useful if it is based on business logic rather than tech logic.

Dividing the whole stack into self-contained components that preferably don't share files among them is the best way to make your app more testable and easy to update. This in the smallest possible way is what commonly known as microservice architecture.

Bad Design : difficult to update and test:

Good Design : easy to update and test:

来源：https://stackoverflow.com/questions/51126472/how-to-organise-file-structure-of-backend-and-frontend-in-mern