在 Express 和 React 中响应 index.html

Question

我有一个Express应用程序，其中包含一个create-react-app。当用户访问根URL时，我希望显示位于create-react-app公共文件夹中的index.html。这是我的Express应用程序中index.js的代码：

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

app.get('/',function(req,res){


});

const PORT = process.env.PORT || 5000;
app.listen(PORT);

这是我的项目目录。

- kamalakshi hegde

Answer 1

你需要这行代码：app.use(express.static('public'))。在这里查看：https://expressjs.com/en/starter/static-files.html。

- mikkelrd

---

就这样？我应该把它添加到哪里？ - kamalakshi hegde

如何获取index.html文件的路径 - kamalakshi hegde

现在，只需将其添加到您当前的app.get块中即可。这应该足以提供index.html，因为它基本上告诉您的express应用程序：“当基本URL有一个get请求时，请继续公开此目录，并默认情况下响应存在的index.html文件的内容”。 - mikkelrd

我想在app.get('/')中使用res.sendFile()方法。 - kamalakshi hegde

但在Express的文档中，推荐使用 express.static 方法，可以通过我回答中提供的链接了解更多。 - mikkelrd

Answer 2

如果你想使用sendFile()，可以像这样操作：

const router = express.Router();
router.get('/', (req, res) => {
    res.sendfile(path.join(__dirname, './client/public', 'index.html'));
});
app.use('/', router);

我使用路径是因为根据您启动应用程序的方式，仅使用相对路径可能会导致错误。

- ocespedes

---

我得到了这个错误：Error: ENOENT: 没有此文件或目录，stat '/Users/sriram/Desktop/public/index.html'。 - kamalakshi hegde

是的，我会更新答案。这是关于路径如何使用的问题，考虑到你的项目结构，请查看现在更新的答案。 - ocespedes

是的，这个可以工作了，我的标题已经更改为React应用程序，但我没有得到它的正文，这是因为bundle.js或相关的东西吗？顺便说一下，我正在codit（express应用程序）中使用create-react-app。 - kamalakshi hegde

从您的文件夹结构图片中，我可以看出您尚未构建应用程序，请确保在React应用程序中运行“npm run build”。 - ocespedes