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

Question

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

gps*_*ugy 10 static express reactjs server create-react-app

问题

我已经成功地为我的React应用程序提供了index.html文件,但是在我的第一个React组件的html文件index.js中替换<root>它并没有触发ReactDOM.render. 如何index.js启动文件？如果我对React应用程序服务的理解在某些方面存在偏差,我将非常感谢您的澄清.

文件夹结构

/ - 包含所有服务器端文件,包括 server.js
/ client/ - 包含所有React文件
/ client/build/ - 包含所有生产就绪的客户端文件
- /客户/建设/index.html
- / client/build/static/js/main.[hash].js- 似乎是index.js包含ReactDOM.renderfor my React应用程序的缩小版本

当前部署

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

文件片段

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

Run Code Online (Sandbox Code Playgroud)

这会成功加载create-react-app提供的默认index.html

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

Run Code Online (Sandbox Code Playgroud)

上面的代码部分可能/可能没用,但它是create-react-app附带的默认html文件.我是否需要使用引用缩小index.js 文件的脚本标记替换noscript标记？我试过了,并没有改变,但也许是因为不正确的相对路径制作.

Answer 1

gps*_*ugy 17

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

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

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

Run Code Online (Sandbox Code Playgroud)

它在您使用“npm run build”构建客户端站点后起作用。您必须提供由 React 生成和交叉链接的客户端代码，而不是您所处理的“public”文件夹。 (2认同)

归档时间：	8 年，4 月前
查看次数：	7738 次
最近记录：	7 年，6 月前