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

标签 reactjs express static server create-react-app

问题

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

文件夹结构

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

当前部署

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

文件片段

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

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

// 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 的 script 标记 文件?我已经尝试过,但没有任何改变,但也许是这样 因为相对路径制定不正确。

最佳答案

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

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

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

关于reactjs - 如何使用expressJS提供ReactJS静态文件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44684461/

相关文章:

reactjs - 在 ClojureScript 中,如何正确使用 cljsjs/react-mdl?

JavaScript - var self = this; self 未定义

jquery - Node.js + Express : `sendfile` to Ajax request giving a 404

c - 如何在 C 中模拟构造函数或静态 block

node.js - 当 props.match.params.id 返回未定义但 id 在 url 上可见时,如何获取 url 的 id 参数?

css - SASS:在 index.js 中导入的 scss 不呈现(使用 create-react-app)

javascript - 在选择一项之前如何获取选择中的值?

mysql - Node/Express + MySQL : Inserts not displaying instantly

java - Java 中需要类变量吗?

html - maven中的静态html网页