react-snapshot 静态文件构建但不在本地环境中提供答案

【问题标题】：react-snapshot Static Files Build but Aren't Served on Local Environmentreact-snapshot 静态文件构建但不在本地环境中提供
【发布时间】：2017-10-11 20:45:55
【问题描述】：

关于堆栈溢出的第一次提问者。

我正在开发 reactJS SPA，需要针对 SEO 进行优化。为此，我集成了react-helmet 以使用所查看的高级组件动态更新元数据。不幸的是，这对于谷歌或 Facebook 的爬虫来说是不够的。经过一番研究，我了解到react-snapshot 是一个不错的选择，因为它会爬取 SPA 并生成静态 html 文件，最初在 js 包加载时提供 - 这应该会导致爬虫看到每条路线的适当元数据。

我已经按照文档建议集成了 react-snapshot，并通过运行

npm run build

命令，所有的静态文件都按预期生成。但是，当我在本地（端口 3000）启动系统进行测试时，看起来静态文件没有提供给浏览器。通过查看源代码，它显示默认的 index.html 就是所有显示的内容。我不知道我没有做什么，或者做错了什么。任何建议将不胜感激！

更新：经过两天的 head -> wall 我意识到 create-react-app 不会自动托管构建版本（这是包含静态页面的位置）。为了查看文件是否被正确提供，最好全局安装 serve 包，并使用它在本地机器上临时托管您的应用程序。

npm install -g serve

安装后，按照 react-snapshot 文档中的说明构建应用程序，然后使用以下命令运行应用程序的构建版本：

serve -s build

【问题讨论】：

您是否更改了您的ReactDOM.render()？应该是ReactDOM.render(render( <App/>, document.getElementById('root') );。注意里面额外的render 调用。
嘿蔡斯，谢谢你的建议。我会试一试 - 尽管我认为文档建议将 ReactDOM.render() 完全替换为 render()，而不是嵌套它们？
更新：不幸的是，这个建议没有奏效。根据文档：- import ReactDOM from 'react-dom'; + import { render } from 'react-snapshot'; - ReactDOM.render( + render( <App/>, document.getElementById('root') );

标签： reactjs heroku react-router single-page-application create-react-app

【解决方案1】：

所以对于那些因为同样困惑而遇到这种情况的人，我发现我做错了什么。

当使用带有 create-react-app 的 npm start 命令时，它会在 localhost 上启动一个带有热更新的服务器，但它不提供构建版本（即使您已经手动构建它）。由于这是 react-stapshot 生成的静态文件所在的位置，因此它们不会以这种方式提供给浏览器。

如果您想测试项目的缩小版本，包括那些静态文件，（并且您仍然想在本地进行），您需要使用某种服务器包。在我的例子中，我使用了 Serve 模块如下：

npm install -g serve

一个全局安装，构建您的项目，然后在准备好后设置服务器。

npm run build
serve -s build

这将在 localhost 上启动您的构建版本 - 这将允许您测试应用的构建版本 - 包括静态 react-snapshot 文件。

【讨论】：