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

时间:2017-10-11 20:45:55

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

第一次提问堆栈溢出问题。

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

我已经根据文档建议集成了react-snapshot,并运行了

npm run build

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

更新:所以经过两天的头 - >我意识到create-react-app并没有自动托管构建版本(这是静态页面所在的位置)。为了查看文件是否正确提供,最好全局安装服务包,并使用它在本地计算机上临时托管您的应用程序。

npm install -g serve

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

serve -s build

1 个答案:

答案 0 :(得分:0)

因此,对于任何遇到这种情况的人,因为他们同样感到困惑,我发现了我做错了什么。

在create-react-app中使用npm start命令时,它会启动一个在localhost上进行热更新的服务器,但它不提供构建版本(即使您手动构建它)。由于这是反应 - 快照生成的静态文件的实时位置,因此它们不会以这种方式提供给浏览器。

如果要测试项目的缩小版本(包括那些静态文件)(并且您仍希望在本地执行),则需要使用某种服务器包。就我而言,我使用了Serve模块如下:

npm install -g serve

全局安装,构建项目,然后在服务器准备就绪后设置它。

npm run build
serve -s build

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

相关问题