Node.js create-react-app构建

Question

I am pretty new to web development and I was asked to create a single-page application with tools of my choice. The only requirement is that it has to run locally on a GlassFish server (in NetBeans: Java Web > Web Application). I use the create-react-app starter kit provided by Facebook to build the application. When I run npm run build I get a build folder containing an html-file and a js-file. But when I double-click the html-file, the browser opens and just shows an empty page. Does anyone know what I have to configure in order to get a bundled html-file that shows the application when I open it?

Thank you

Answer 1

After running " npm run build " on your create-react-app generated code, it displays instructions to help with just this. It says something like:

You may also serve it locally with a static server:

npm install -g pushstate-server
pushstate-server build

The first command, " npm install -g pushstate-server " only needs to be run once, as it installs "pushstate-server" to global NPM. The second command " pushstate-server build " runs the simple static server, pushstate-server, and serves up any content in the "build" folder at http://localhost:9000 . You can change the port number if you wish, by adding it at end of command line: " pushstate-server build 1234 "

UDPATE: Serverless method...

If your goal is to run the page from the file system, and not from a web server, you'll need to tweak the build/index.html to fix the paths to your JS and CSS (and less importantly, your favicon.ico). The index.html generated by create-react-app expects your JS and CSS to be at "/static/...". However, when you open from the file system, that path is not correct. If you remove the leading forward slash, making the URLs relative, your page will load properly from the file system:

After running "npm run build", open the generated "build/index.html" file. Remove the leading forward slash from "/favicon.ico", "/static/js/main.[random string].js" and "/static/css/main.[random string].css" and save your changes (so that the all read "static/..." and not "/static/..."). Reload/refresh the page in the browser.