如何在MERN中组织后端和前端的文件结构 [英] How to organise file structure of backend and frontend in MERN

问题描述

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

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

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

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

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

在这个阶段我坚持了下来.如果服务器文件夹中的客户端文件夹或客户端中的服务器文件夹，我可以创建它. 1.但是当两个文件夹是同级文件夹时，如何使其运行? 2. package.json应该是什么，node.modules应该在哪里(服务器和客户端是否都应该拥有自己的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?)

推荐答案

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

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.

应用结构

文件夹结构

更新:

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

In development, I suggest installing two additional things:

1. npm i -D nodemon
2. npm i -D concurrently

注意:-D标志会将它们安装为 devDependencies .

Note: The -D flag will install them as devDependencies.

nodemon 将跟踪每个文件更改并为您重新启动后端服务器.因此，很明显，它应该安装在后端"文件夹中.您所要做的就是进入package.json文件(后端)并添加一个新脚本.像这样:

nodemon is going to track every file change and restart the backend server for you. So, it's obvious that it should be installed inside of the "backend" folder. All you have to do is go inside of the package.json file (backend) and add a new script. Something like this:

"scripts": {
"start": "node app.js",  // in production
"dev": "nodemon app.js", // in development
}

---

concurrently 使您可以同时启动前端和后端.我建议在顶级 root 文件夹-[同时包含您的前端和后端的文件夹]中初始化一个新的Node项目.您可以使用npm init命令执行此操作，然后在其中安装concurrently软件包.

---

concurrently allows you to start both your frontend and backend at the same time. I suggest initializing a new Node project inside of the top-level root folder -[folder which contains both, your frontend and backend]. You would do that with the npm init command, and after that, install the concurrently package there.

现在，在 根 文件夹中打开新创建的package.json文件，然后编辑开始部分，如下所示:

Now, go open your newly created package.json file inside of your root folder and edit the start section, like this:

   "scripts": {
       "dev": "concurrently \"cd backend && npm run dev\" \"cd frontend && npm start\" "
   }

此操作将在后端文件夹中并运行dev命令(我们刚配置的相同)，这样就开始.此外，它还将位于 frontend 文件夹中，并运行默认的start命令-这正是我们想要的.

What this will do is go inside of the backend folder and run the dev command (the same one we just configured), so that will start nodemon. Additionally, it will also go inside of the frontend folder and run the default start command -which is exactly what we want.

如果您保留了文件夹结构，安装了所有依赖项(包括我上面提到的另外两个依赖项)，并且更改了 root 文件夹中的package.json文件，您将能够用一个简单的命令将它们都启动:

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

npm run dev //这样做时请确保您位于根文件夹中:)

npm run dev // make sure you're inside of the root folder when doing so :)

这篇关于如何在MERN中组织后端和前端的文件结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！