如何使用Gulp将Express添加到React应用程序？

Question

我正在编写一个现在处于良好状态的React应用程序。现在，我想添加一个后端来访问Mongodb文档并创建REST API，就像在现有项目之上添加一个层一样。我希望Express能够像我的React应用程序一样收听相同的端口。我正在使用Gulp，使用默认任务启动应用程序。

我无法找到一种方法，如果-bash: /usr/bin/<executable>: Permission denied 使用与其反应部分相同的端口，我得到app.listen（显然）。

这是我的gulpfile.js

port already in use

我尝试组合生成的快速应用，所以我的文件夹看起来像这样：

这可能吗？如果是这样，我该怎么做？

Answer 1

根据您在评论中提供的额外信息，我建议您选择以下两个选项之一：

• 单独托管API。在一个单独的端口上，甚至可能在一个单独的存储库中分离关注点。

或

• 调整您的gulp任务以启动快速服务器并从快速应用程序中提供静态内容。然后你可以设置你的api路由来返回json并通过AJAX请求从你的静态内容（html）请求json，或者其他什么。

无论哪种方式，您都可以使用Nodemon来重新加载API和/或静态内容服务器。

希望有所帮助。使用express generator生成快速应用程序很容易。

Answer 2

想出办法来做到这一点。正如我在问题中所说（但有更多细节）：将当前的React应用程序与Express Generated应用程序相结合是正确的方法。所以我所做的基本上是：

1. 添加bin，views＆amp;将文件夹和app.js文件路由到React项目文件夹
2. 在app.js中添加此行以提供为React组件生成的目标JS文件： app.use(express.static(path.join(__dirname, 'dist')));
3. 编辑连接任务以删除端口配置。它将在以后启动服务器时解决。在gulpfile.js中再添加一个任务： gulp.task('dev', ['html', 'js', 'css','lint', 'connect', 'watch']);
4. 在package.json中，编辑调用新gulp任务的启动脚本：gulp dev && node ./bin/www
5. 将Express App package.json文件中的依赖项复制并粘贴到新的React项目中。
6. 删除node_modules文件夹并重新运行npm install
7. 运行npm start以启动完整堆栈应用。

希望这可以帮助任何人。