[英]Can't find static folder in express bundled by webpack (SSR)
I intend to do server side rendering in react with event handlers and I'm stuck on a problem on getting the index.js file be served in the localhost express server. 我打算通过事件处理程序来进行服务器端渲染,而在将index.js文件提供给localhost express服务器时遇到了一个问题。 Tried looking for several other answers here but I can't seem to wrap my head around this.
试图在这里寻找其他几个答案,但我似乎无法将其包裹住。
Here's the code. 这是代码。
import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import App from "./app/home/app";
import path from "path";
import fs from "fs";
let server = port => {
const app = express();
app.use('/js', express.static(path.resolve('/static')));
console.log(path.resolve('/static'));
console.log(path.join(__dirname, '/static'));
console.log(fs.existsSync(path.resolve('/static')));
app.get("/", (req, res) => {
res.status(200).send(renderMarkup(renderToString(<App />)));
});
app.get("/ping", (req, res) => {
res.status(200).send("HELLO!");
});
app.listen(port, () => console.log("Server Ready!"));
}
let renderMarkup = html => {
return `
<!DOCTYPE html>
<html>
<head>
<title>Webpack SSR Demo</title>
<meta charset="utf-8" />
</head>
<body>
<div id="app">${html}</div>
<script src="/js/index.js"></script>
</body>
</html>
`;
}
server(process.env.PORT || 8080);
I tried logging if my static directory exists. 我尝试记录是否存在我的静态目录。 It returns a false although when I check my build folder (the output directory of the webpack bundle. It does exist).
尽管当我检查构建文件夹(Webpack捆绑包的输出目录。它确实存在)时,它仍返回false。
My build folder directory is described below (rest assured all js bundles are built successfully): 我的构建文件夹目录如下所述(请放心,所有js捆绑包均已成功构建):
build
|- static
|-- index.js
|- server.js
TLDR: The view is successfully rendered. TLDR:视图已成功呈现。 The events are not working because the client side javascript is not being loaded.
由于未加载客户端JavaScript,因此事件无法正常运行。
After scouring a lot of questions, github issues and reading the bundled js. 在搜寻了许多问题之后,github问题并阅读了捆绑的js。
It wasn't a problem with the server code. 服务器代码不是问题。 See: https://github.com/webpack/webpack/issues/1599
参见: https : //github.com/webpack/webpack/issues/1599
I needed to add this to my webpack.server.js: 我需要将其添加到我的webpack.server.js中:
node: {
__dirname: false,
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.