[英]How to organise file structure of backend and frontend in MERN
I have backend based on express + mongoose.我有基于 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:以及用于前端的常规基于 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
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? 1.但是当两个文件夹是兄弟时如何让它运行? 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?) 2. package.json 应该是什么以及 node.modules 应该在哪里(服务器和客户端是否应该拥有自己的 package.json 和模块?)
The most basic structure would be to have a root
folder that contains frontend
and backend
folders.最基本的结构是拥有一个包含frontend
和backend
文件夹的root
文件夹。 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.既然你谈论MERN堆栈,你将有一个package.json
你里面NodeJS
后端环境和package.json
为您React
的事情的一面。 Backend server and the frontend client are two totally separate things, so yes, they both have their own node_modules folders.后端服务器和前端客户端是两个完全独立的东西,所以是的,它们都有自己的 node_modules 文件夹。 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.在后端,您可能已经为 Node 运行时安装了Express
东西,为更方便地与MongoDB
对话等安装了Mongoose
,而在前端,您将使用React
作为前端框架, Redux
用于状态管理等。此外,根据您在 package.json 文件中已经列出的内容,当您单独运行npm install
,它将安装在这两个文件夹中。 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).如果要安装其他软件包,只需在需要它的特定文件夹(后端或/和前端)内运行npm install + "the name of the package"
(不带“+”和引号)。
I hope this was helpful.我希望这可以帮到你。 Check out the pics, especially the 2nd one.看看照片,尤其是第二张。
Folder structure文件夹结构
UPDATE:更新:
In development, I suggest installing two additional things:在开发中,我建议安装两个额外的东西:
npm i -D nodemon
npm i -D concurrently
Note: The -D
flag will install them as devDependencies
.注意: -D
标志会将它们安装为devDependencies
。
nodemon
is going to track every file change and restart the backend server for you. nodemon
将跟踪每个文件更改并为您重新启动后端服务器。 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.您所要做的就是进入package.json
文件(后端)并添加一个新脚本。 Something like this:像这样的东西:
"scripts": {
"start": "node app.js", // in production
"dev": "nodemon app.js", // in development
}
concurrently
allows you to start both your frontend and backend at the same time. concurrently
允许您同时启动前端和后端。 I suggest initializing a new Node project inside of the top-level root folder -[folder which contains both, your frontend and backend].我建议在顶级根文件夹中初始化一个新的 Node 项目 - [包含前端和后端的文件夹]。 You would do that with the npm init
command, and after that, install the concurrently
package there.你会做,与npm init
命令,并在此之后,安装concurrently
包裹。
Now, go open your newly created package.json
file inside of your root folder and edit the start section, like this:现在,打开根文件夹中新创建的package.json
文件并编辑开始部分,如下所示:
"scripts": {
"dev": "concurrently \"cd backend && npm run dev\" \"cd frontend && npm 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
.这将做的是进入后端文件夹并运行dev
命令(与我们刚刚配置的相同),以便启动nodemon
。 Additionally, it will also go inside of the frontend folder and run the default start
command -which is exactly what we want.此外,它还将进入前端文件夹并运行默认start
命令——这正是我们想要的。
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:如果您保留文件夹结构,安装所有依赖项(包括我上面提到的另外两个依赖项),更改root
文件夹中的package.json
文件,您将能够使用一个简单的命令启动它们:
npm run dev
// make sure you're inside of the root folder when doing so :) npm run dev
// 执行此操作时,请确保您位于根文件夹内:)
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 :良好的设计:易于更新和测试:
Use Structure as per your requirement, like based on the project scope or depth.根据您的要求使用结构,例如基于项目范围或深度。 But make sure to keep the endpoints and models separate, so initially have a setup like such但是请确保将端点和模型分开,因此最初有这样的设置
src/
controllers - for the endpoints
models - for the schema
server.js - or index.js
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.