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

2024-03-17

问题

我已成功提供 React 应用程序的 index.html 文件,但是index.js取代<root>在html文件中 我的第一个 React 组件没有触发ReactDOM.render. 我如何获得index.js文件来启动?如果我对服务 React 应用程序的理解在某些方面存在偏差,我会极大地 感谢澄清。

文件夹结构

  • / - 包含所有服务器端文件,包括server.js
  • /client/ - 包含所有 React 文件
  • /client/build/ - contains all production-ready client files
    • /客户端/构建/index.html
    • /客户端/构建/静态/js/main.[hash].js- 似乎是缩小版index.js其中包含ReactDOM.render为了 我的反应应用程序

当前部署

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

文件片段

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

这成功加载了提供的默认index.html 创建反应应用程序

// index.html
<body>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <div id="root"></div>
</body>

上面的代码部分可能有用也可能没用,但它是默认的 create-react-app 附带的 html 文件。我需要更换吗 noscript 标签带有引用缩小的脚本标签index.js文件?我已经尝试过,但没有任何改变,但也许是这样 由于相对路径制定不正确。


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

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

app.use(express.static(path.join(__dirname, '../client/build')));
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用expressJS提供ReactJS静态文件? 的相关文章

随机推荐