I have a built a small React application with create-react-app, and it runs fine from the local server after running npm start
. OK so far.
However, when I run npm run build
, the process appears to execute correctly (creates build folder, which contains the bundled js file and the index.html file), but when I open index.html in my browser it renders nothing. What am I missing?
Aside: I also tried uploading it to a remote server and when I went to the URL the browser came back with...
Forbidden: You don't have permission to access / on this server.
...if anyone has any idea how to resolve this I'd also appreciate it.
create-react-app is a customised webpack configuration. The command line npm run build creates the index. html file, and the corresponding javascript is all bundled into one minified js file, all placed in a single folder, 'build'.
Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. npx on the first line is not a typo — it's a package runner tool that comes with npm 5.2+.
However, when I run npm run build, the process appears to execute correctly (creates build folder, which contains the bundled js file and the html.index file), but when I open index.html in my browser it renders nothing. What am I missing?
When you run npm run build
, it prints the relevant instructions:
You can’t just open index.html
because it is supposed to be served with a static file server.
This is because most React apps use client-side routing, and you can’t do that with file://
URLs.
In production, you can use Nginx, Apache, Node (e.g. Express), or any other server to serve static assets. Just make sure that if you use client-side routing, you serve index.html
for any unknown request, like /*
, and not just for /
.
In development, you can use pushstate-server
for this. It works with client-side routing well. This is exactly what the printed instructions suggest you to do.
I also tried uploading it to a remote server and when I went to the URL the browser came back with Forbidden: You don't have permission to access / on this server.
You need to upload the contents of the build
folder, not the build
folder itself. Otherwise the server can’t find your index.html
because it is inside build/index.html
, and so it fails. If your server doesn’t detect a top-level index.html
, please refer to your server’s documentation on configuring files served by default.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With