最佳实践：使用 create-react-app 的客户端和服务器的文件夹结构答案

【问题标题】：Best practices: Folder structure for client and server using create-react-app最佳实践：使用 create-react-app 的客户端和服务器的文件夹结构
【发布时间】：2019-02-18 05:55:12
【问题描述】：

最近，我使用 create-react-app 完成了一些带有 Node 后端和 React 前端的小项目。尽管我花了很多时间研究文件夹结构的最佳实践，但我无法在不弹出 react 应用程序的情况下提出令人满意的解决方案。我想知道是否有我还没有找到的解决方案。

我试图瞄准的文件夹结构如下所示：

package.json
src/
   client/
     app.js
     ...
   server/
   index.js (node.js main file, could just as well be in server/)

此布局允许我从根文件夹运行所有脚本，并且我可以将所有配置放在一个 package.json 中。例如，我希望能够从根文件夹运行npm test，然后使用 jest 来运行客户端和服务器测试。

据我所知，create-react-app 在使用 npm start 时硬连线期望 src/index.js，这会阻止我使用此文件夹结构 - 如果我只是移动由 create-react- 生成的所有样板 -应用程序进入客户端文件夹我有一个丑陋的src/client/src 文件夹，它再次包含它自己的package.json。我想我可以以不同的方式拆分它，创建一个client/src 和server/src，但我仍然在每个目录中有单独的 package.json 文件。

希望听到您对此的体验，也许我错过了明显的解决方案。

【问题讨论】：

由于 Node 应用程序不需要处理 CRA，除非它希望将捆绑包放置到公用文件夹中，因此没有理由将 Node 应用程序保留在 CRA 项目下。

标签： node.js reactjs create-react-app

【解决方案1】：

   mainDir/
      app/
        src/
          index.js
        package.json
      api/
        src/
          index.js
        package.json

我遵循这种模式在微服务架构中开发应用程序。

此结构适用于单一存储库。

您也可以将前端和后端分成不同的存储库。

【讨论】：