react-snapshot静态文件构建但不在本地环境中服务

第一次在堆栈溢出时提问问题。react-snapshot静态文件构建但不在本地环境中服务

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

我已经集成反应快照作为文件中建议，并通过运行

npm run build

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

UPDATE：因此，经过两天的头 - >墙，我意识到create-react-app不会自动承载构建版本（这是包含静态页面的地方）。为了查看文件是否正确传输，最好在全局安装服务包，并使用它在本地机器上临时托管您的应用。

npm install -g serve

安装完成后，构建应用程序的反应快照文档中列出，然后使用运行你的应用程序的内部版本：

serve -s build

来源

2017-10-11 Zachary Fejes

您是否更改过'ReactDOM.render（）'？应该是'ReactDOM.render（render（，document.getElementById（'root'））;'。注意里面额外的'render'调用 –

Hey Chase，谢谢你的建议，我会试试看 - 虽然我认为文档建议完全用render（）替换ReactDOM.render（），反对嵌套它们？ –

**更新**：不幸的是，这个建议并没有做到这一点。根据文档： ' - 从'react-dom'导入ReactDOM; +从'react-snapshot'导入{render}; - ReactDOM.render（ +渲染（，的document.getElementById（ '根'））;' –

因此，对于任何人谁遇到这一点，因为他们也同样困惑，我发现我做错了。

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

如果您想测试项目的缩小版本版本（包括那些静态文件，并且您仍然希望在本地执行），则需要使用某种服务器软件包。就我而言，我用如下即成模块：

npm install -g serve

是全球的装机量，生成项目，然后设置服务器，一旦它准备好一个。

npm run build 
serve -s build

这将启动在本地主机的内部版本 - 这将让你测试你的应用程序的内部版本 - 包括静态反应快照文件。

来源

2017-10-14 00:25:29

react-snapshot静态文件构建但不在本地环境中服务

回答

相关问题