Node.js create-react-app构建

Question

我是Web开发的新手，并被要求使用我选择的工具创建一个单页应用程序。 唯一的要求是它必须在GlassFish服务器上本地运行（在NetBeans中：Java Web> Web应用程序）。 我使用Facebook提供的create-react-app入门套件来构建应用程序。 当我运行npm run build我得到一个包含html文件和js文件的构建文件夹。 但是，当我双击html文件时，浏览器将打开并仅显示一个空白页面。 有谁知道我必须配置什么才能获得一个捆绑的html文件，当我打开它时会显示该应用程序？

谢谢

Answer 1

在您的create-react-app生成的代码上运行“ npm run build ”后，它会显示相关说明来帮助您。 它说像：

You may also serve it locally with a static server:

npm install -g pushstate-server
pushstate-server build

第一个命令“ npm install -g pushstate-server ”只需运行一次，因为它将“ pushstate-server”安装到全局NPM。 第二个命令“ pushstate-server build ”运行简单的静态服务器pushstate-server，并提供位于http：// localhost：9000的“ build”文件夹中的所有内容。 您可以根据需要更改端口号，方法是在命令行末尾添加：“ pushstate-server build 1234 ”

UDPATE：无服务器方法...

如果您的目标是从文件系统而不是从Web服务器运行页面，则需要调整build/index.html以修复JS和CSS的路径（更不重要的是，您的favicon.ico ）。 create-react-app生成的index.html期望您的JS和CSS位于“ / static / ...”。 但是，从文件系统打开时，该路径不正确。 如果删除前导斜杠（使URL相对），则页面将从文件系统正确加载：

运行“ npm run build”后，打开生成的“ build / index.html”文件。 从“ /favicon.ico”，“ / static / js / main。[随机字符串] .js”和“ / static / css / main。[随机字符串] .css”中删除前导斜杠并保存更改（因此都读为“ static / ...”，而不是“ / static / ...”）。 在浏览器中重新加载/刷新页面。