简体   繁体   English

后端和前端的文件夹结构

[英]Folder structure for backend and frontend

Im setting up a project with a express node.js backend and react frontend.我建立了一个带有快速 node.js 后端和反应前端的项目。 This is my first time setting a project up with a backend and their are a few things im unsure of...这是我第一次用后端设置项目,我不确定他们的一些事情......

First question:第一个问题:

So my current folder structure is this:所以我当前的文件夹结构是这样的:

--backend --后端
--node_modules --node_modules
--package-lock.json --package-lock.json
--package.json --package.json
--server.js --server.js
--yarn.lock --yarn.lock
--client - 客户
--node_modules --node_modules
--package.json --package.json
--public - 民众
--.gitignore --.gitignore
--README.md --README.md
--yarn.lock --yarn.lock
--src --src
--boilerplate create-react-app files --boilerplate create-react-app 文件

My package.json file:我的 package.json 文件:
BACKEND后端

{
  "name": "yelp-clone-2-backend",
  "license": "MIT",
  "version": "1.0.0",
  "scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\""
  },
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.17.1"
  },
  "devDependencies": {
    "concurrently": "^4.0.1"
  }
}

My package.json file: 我的 package.json 文件:

FRONT-END前端

{ "name": "yelp-clone-2-front-end", "version": "0.1.0", "license": "MIT", "private": true, "proxy": "http://localhost:5000/", "dependencies": { "@testing-library/jest-dom": "^5.11.4", "@testing-library/react": "^11.1.0", "@testing-library/user-event": "^12.1.10", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "4.0.3", "web-vitals": "^1.0.1" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }


I am using the command from the BACKEND package.json to combine the frontend and backend server 我正在使用来自 BACKEND package.json 的命令来组合前端和后端服务器
"dev": "concurrently --kill-others-on-fail \\"yarn server\\" \\"yarn client\\""

The problem im having is with my current folder structure when i run this command (from the /backend dir) i get当我运行此命令(从 /backend 目录)时,我遇到的问题是我当前的文件夹结构

[1] /bin/sh: line 0: cd: client: No such file or directory error Command failed with exit code 1.

But... if i move everything out of backend and into the root dir so outside of client and not in backend folder anymore, the command works and the server starts and listens on port 5000 like expected. 但是...如果我将所有内容从后端移到根目录中,以便在客户端之外而不是在后端文件夹中,则该命令将起作用并且服务器启动并像预期的那样在端口 5000 上侦听。

Why does the command only work with the backend files in the root dir and not in the backend folder like i want. 为什么该命令仅适用于根目录中的后端文件,而不像我想要的那样在后端文件夹中使用。

Ive tried running the following commands with everything back inside of the backend folder before starting the server with no luck: 在没有运气启动服务器之前,我尝试将以下命令运行在后端文件夹中的所有内容中:
 rm -rf node_modules yarn cache clean yarn yarn start
  • For the cd command which fails to run, you need to understand that the npm command executes inside the backend folder.对于运行失败的cd命令,需要了解npm命令是在backend文件夹内执行的。 That means that if you want to change the directory to the client folder you need to append two dots before the folder: cd ../client .这意味着如果要将目录更改为客户端文件夹,则需要在文件夹前附加两个点: cd ../client You tried to go to backend/client which is nonexistant.您试图转到不存在的后端/客户端。

  • To generate a git repository you need to run git init and not npm init .要生成 git 存储库,您需要运行git init而不是npm init

Please understand how the cd command works before using it blindly as it could have some really bad results on a professional environment.请在盲目使用 cd 命令之前了解它的工作原理,因为它在专业环境中可能会产生一些非常糟糕的结果。

For any more questions reply to this answer and I can gladly edit it.对于任何更多问题,请回复此答案,我很乐意对其进行编辑。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM