如何在MERN中组织后端和前端的文件结构

Question

我有基于express +猫鼬的后端。文件结构为：

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

以及用于前端的基于常规create-react-app的文件夹：

- /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

我想以适当的方式一起使用它。我想这样组织：

- /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

在这个阶段，我坚持了下来。如果服务器文件夹中的客户端文件夹或客户端中的服务器文件夹，我可以做到。 1.但是，当两个文件夹是同级文件夹时，如何使其运行？ 2. package.json应该是什么，node.modules应该在哪里（服务器和客户端都应该拥有自己的package.json和模块？）

Answer 1

最基本的结构是拥有一个root文件夹，其中包含frontend和backend文件夹。由于您在谈论 MERN 堆栈，因此您在 package.json 后端环境中将有一个NodeJS和package.json代表您的 React 方面。后端服务器和前端客户端是两个完全独立的事物，所以是的，它们都有自己的node_modules文件夹。在后端，您可能已为节点运行时安装了Express之类的东西，为与Mongoose进行对话的更便捷方法安装了MongoDB，在前端，您已经将React作为前端框架，Redux作为状态管理，等等。此外，根据您已经在package.json文件中列出的内容，在运行npm install时单独，它将安装在这两个文件夹中。如果要安装其他软件包，只需在需要的特定文件夹（后端或/和前端）中运行npm install + "the name of the package"（不带“ +”且不带引号）。

我希望这会有所帮助。查看图片，尤其是第二张。

应用结构
 

文件夹结构

更新：

在开发中，我建议安装另外两个东西：

1. npm i nodemon
2. npm i concurrently

Nodemon 将跟踪每个文件更改，并且使用 concurrently 您可以同时启动前端和后端。 例如，您可以转到 后端 文件夹中的package.json文件，然后编辑开始部分，如下所示：

"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
  }

如果您保留了文件夹结构，安装了所有依赖项（包括上面提到的另外两个依赖项），并在后端更改了package.json文件，则可以使用一个简单的命令将它们同时启动：

npm run dev

Answer 2

除了接受的答案外，如果前端和后端内部的文件夹结构分区基于业务逻辑而不是技术逻辑，则它会更有用。

将整个堆栈分为独立的组件，最好不要在其中共享文件，这是使您的应用程序更具可测试性和易于更新的最佳方法。这是最小的方式，即通常所说的微服务架构。

不良设计：难以更新和测试 ：

良好的设计：易于更新和测试 ：

Answer 3

根据您的要求使用结构，例如基于项目范围或深度。但是请确保将端点和模型分开，所以最初有这样的设置

src/
controllers - for the endpoints
models - for the schema
server.js - or index.js