如何在单个 Heroku 应用程序中部署前端（React.js）和后端（Node.js）答案

【问题标题】：how to deploy frontend(React.js) and backend(Node.js) in a single Heroku app如何在单个 Heroku 应用程序中部署前端（React.js）和后端（Node.js）
【发布时间】：2023-03-25 00:00:01
【问题描述】：

我有一个名为“app”的父文件夹，它有 2 个子文件夹，

“前端”
“后端”

显然两者都有不同的 package.json 文件。为了将它部署到 Heroku，我们需要根文件夹中的 package.json，有人可以解释我如何在根文件夹中获取它吗？

【问题讨论】：

请添加您到目前为止所做的步骤，没有人会为您完成工作
我是一名初级开发人员，我们需要将我们的应用程序部署到heroku，以便客户端可以使用它等等。但是我没有部署它的权限，任何高级开发人员都会部署它，昨晚一位高级开发人员问我，为了将它部署到 Heroku，“我们需要一个根 package.json”这是我唯一关心的问题，我不明白如何在根文件夹中获取 package.json ......请指导我

标签： node.js reactjs heroku deployment

【解决方案1】：

很抱歉，一个完整的教程远远超出了 Stack Overflow 答案的范围。

概括地说，你要做的就是这个。您可能需要团队领导的帮助才能完成所有这些工作。

在您的后端应用程序中创建一个public 目录...您将部署到 Heroku 的目录。
将所有静态前端文件放在该目录中。
在你的 node express 程序中加入这样一行代码。
```
app.use(express.static('public'))
```
将您的公共目录提交到您的后端应用程序存储库。
告诉您的用户点击whatever.herokuapp.com/index.html 或您的前端应用的起始页。
将前端的构建说明复制到后端的顶层 package.json 中，并将它们输出到新创建的公共目录。
删除单独的前端 repo，并且（我认为）永远不要再分离前端和后端，除非这是 devops 或您的团队的绝对要求。

更高级的方法可能是使用 git 为您的前端代码创建一个子目录。但是，当您将前端和后端组合在一个存储库中时，Heroku 的部署会更简单。

（我希望 freecodecamp.com 的 Quincy Larson 等有影响力的老师停止教人们创建分离的前端和后端。）

【讨论】：