如何使用 React Hooks 将 React.js 与后端一起使用以及如何使用 heroku 部署它？

Question

我想将 React 前端框架与我的后端 express.js 和 EJS 连接起来，因此使用 React Hooks。但是在 express 中，当我们使用 npm start 和 React 在本地主机上启动我们的服务器时，我们在向我们的服务器发出请求时使用 app.get() 。如何将它们连接起来，正确和准确的方法是什么，我需要掌握哪些知识，然后如何使用Heroku部署它们？？

Answer 1

第 1 步：创建 Express 服务器

在项目的根目录中，创建一个名为“server”的新文件夹（例如），并在其中添加一个名为“server.js”的文件。

我用来创建服务器的工具叫做 Express，这是一个用 Node.js 创建 Web 服务器的好工具。您可以通过网络上的许多教程来学习此工具，但在我们的例子中，您只需要编写几行代码即可生成您自己的服务器。

那么让我们开始吧！

安装最新版本的 Express。

npm install express --save

导入 Express，并创建一个新的 Express 实例。

const express = require('express');
const app = express();

告诉 Express 提供 public 文件夹及其中的所有内容。

const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '..', 'public');
app.use(express.static(publicPath));

基本上，我们传入路径的所有部分，path.join 将它们放在一起。然后将结果传递到 app.use(express.static())，因此 Express 将知道要提供哪些文件。

通过告诉服务器使用哪个端口来启动服务器。我在本地环境中使用端口 3000；但是，Heroku 会在部署后为您的应用程序分配一个端口，因此这两种情况都应该涵盖。

const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
const publicPath = path.join(__dirname, '..', 'public');
app.use(express.static(publicPath));
app.listen(port, () => {
   console.log(`Server is up on port ${port}!`);
});

确保提供您的 index.html 文件，以防用户请求当前不在 public 文件夹中的资源。

const path = require('path');
const express = require('express');
const app = express();
const publicPath = path.join(__dirname, '..', 'public');
const port = process.env.PORT || 3000;
app.use(express.static(publicPath));
app.get('*', (req, res) => {
   res.sendFile(path.join(publicPath, 'index.html'));
});
app.listen(port, () => {
   console.log('Server is up!');
});

此时，如果一切顺利，您应该能够在本地测试您的服务器以确保一切设置正确。然后您可以继续在 Heroku 上进行实际部署。

为此，您只需要通过运行ning npm 运行 build 创建生产版本。然后转到您的终端和运行节点 server/server.js，这应该会启动您的服务器，使您的应用程序可以在 http://localhost:3000.

上使用

第 2 步：在 Heroku 上部署

如果您还没有 Heroku 帐户，请创建一个 here。
同样，如果您还没有这个，请安装 heroku-cli。此处有更多详细信息。
转到您的终端，然后通过运行登录 heroku 并在出现提示时输入您的凭据来登录 Heroku。
通过运行在终端中执行以下命令创建您的 Heroku 应用程序（当然，将 my-app 替换为您自己的应用程序的名称）。

heroku create my-app

此时，您的应用程序应该有两个 Git 遥控器：原始遥控器和由 Heroku 创建的遥控器。为了检查这一点，只需运行 git remote.

当 Heroku 启动您的应用程序时，它将尝试运行您 package.json 中的启动脚本。因此，这个脚本应该改为：

"start": "node server/server.js"

将您的代码推送到 Heroku 远程存储库。

git push heroku master

就是这样！您的 React 应用程序现在应该已部署到 Heroku！

你可以通过运行ning heroku open直接从终端打开它。

如何使用 React Hooks 将 React.js 与后端一起使用以及如何使用 heroku 部署它？

How to use React.js with backend using React Hooks and how to deploy it using heroku?

heroku

node.js

express

reactjs

react-fullstack