如何使用expressJS提供ReactJS静态文件?

时间:2017-06-21 19:12:13

标签: reactjs express static server create-react-app

问题

我已成功提供了我的React应用的index.html文件,但是替换了html文件中index.js的{​​{1}} 我的第一个React组件未在<root>上触发。 如何启动ReactDOM.render文件?如果我对服务React应用程序的理解在某些方面存在偏差,我会非常感谢 感谢澄清。

文件夹结构

  • / - 包含所有服务器端文件,包括index.js
  • / client / - 包含所有React文件
  • / client / build / - 包含所有可用于生产的客户端文件
    • /客户端/建造/ server.js
    • / client / build / static / js / index.html - 似乎是main.[hash].js的缩小版,其中包含index.js 我的React app

当前部署

  • 我正在使用Facebook的create-react-app作为/ client /目录,包括npm run build自动填充/ client / build /

文件片段

ReactDOM.render

这会成功加载由。提供的默认index.html 创建反应的应用内

// server.js
let app = express();
app.use(express.static(path.join(__dirname, '../client/public')));

上面的代码部分可能/可能没用,但它是默认的 create-react-app附带的html文件。我需要更换吗? 带有脚本标记的noscript标记,该标记引用了缩小的// index.html <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> </body> 文件?我试过了,并没有改变,但也许是这样 因为不正确的相对路径制作。

2 个答案:

答案 0 :(得分:12)

通过试验/错误尝试了许多不同的事情后,解决方案非常简单:

在静态调用中提供/ client / build文件夹,如下所示:

app.use(express.static(path.join(__dirname, '../client/build')));

答案 1 :(得分:0)

我有一段时间遇到了同样的问题,我想说有效的解决方案分为两部分以避免路由器出现问题

  1. 从 CRA 构建(在您的情况下为客户端/构建)提供静态数据
const buildPath = path.normalize(path.join(__dirname, '../client/build'));
app.use(express.static(buildPath));
  1. 设置最终路由(在服务器中的所有其他路由器之后)以使用以下内容:
const rootRouter = express.Router();
/* 
* all your other routes go here
*/
rootRouter.get('(/*)?', async (req, res, next) => {
  res.sendFile(path.join(buildPath, 'index.html'));
});
app.use(rootRouter);