如何合理地组织全栈应用程序的目录结构？

Question

为了说明我的问题，我需要提到这是我在Stackoverflow上的第一个问题，如果我遗漏了常见做法或忽略了其他使回答更容易的事情，请不要介意。

我的问题涉及其他人如何构建全栈应用程序。在我的情况下，我正在制作一个PERN（PostgreSQL、Express、React、Node）堆栈应用程序。我查看了一些教程，建议前端和后端应该有关注点的分离，也就是说应该有一个根目录包含一个/client/和/server/目录，它们各自具有自己的package.json、node-module等文件。我假设README.md、.gitignore和其他共同文件仍然在根目录中。总体而言，我想知道哪些目录结构通常使用，并且我对所给信息的推断是否正确。

例如:

├─ client/ │ ├─ node-modules/ │ ├─ public/ │ ├─ src/ │ ├─ package.json │ ├─ package-lock.json │ └─ ... ├─ server/ │ ├─ node-modules/ │ ├─ index.js │ ├─ package.json │ ├─ package-lock.json │ └─ ... ├─ README.md ├─ .gitignore └─ ...

此外，我还对运行服务器的JavaScript的名称很好奇，我看过index.js和server.js。

- Coul Greer

---

关注关注分离关注点。不要认为它是一个单一的应用程序或单个单元。后端是独立的，是所有数据的真实来源。您的后端将能够支持您的移动应用程序、Web 应用程序、桌面应用程序等作为单个单元，而您的前端是基于 React 的应用程序则是一个不同的应用程序。您可以使用一个文件夹包含两个子文件夹，一个用于客户端，另一个用于服务器，这样做会更好，因为以后您不会弄乱您的应用程序。https://dev59.com/-G435IYBdhLWcg3w1z4t（服务器） - Samarth Saxena

（客户端）如何组织React + Redux代码库，完全取决于开发人员采用的风格。只需看一下即可。 - Samarth Saxena

Answer 1

将前端与后端解耦是一种常见方法，特别是如果您有不同的团队开发每个部分。考虑的一部分应该是您想使用什么身份验证方法（会话与令牌），以及您想如何部署应用程序。

在同一个节点服务器上提供前端应用程序的好处之一是它属于同一个域，因此可以使用会话。如果您将其解耦，则将位于不同的域上，这样通常会使用令牌。

解耦它们的好处是您可以有多个前端应用程序连接到一个RESTful API。

我几个月前也遇到了同样的问题，并尝试了不同应用程序上的两种方法。我认为这取决于您的用例，但建议在几个个人项目上尝试两种方法。

这是一个使用同一服务器提供构建文件夹的应用程序示例。 https://github.com/StephenGrider/FullstackReactCode/tree/master/server

- Benjamin Hawkins