I am deploying my React app on a public server but when I open it I just get the blank page.

In order to deploy the app I did:

1) run "npm run build" to minify the code and putting into a build folder
2) replaced the local URL in the new index.html file with the correct server ones.

still, when trying to open the website in the console I get these errors.

Any ideas?

I am deploying my React app on a public server but when I open it I just get the blank page.

In order to deploy the app I did:

1) run "npm run build" to minify the code and putting into a build folder
2) replaced the local URL in the new index.html file with the correct server ones.

still, when trying to open the website in the console I get these errors.

Any ideas?

• javascript
• html
• reactjs
• server
• web-hosting

• can we see how you access these resources in your App? Maybe related to this and that. – v-gael Commented Jul 26, 2018 at 6:16
• i basically replaced the local URL, which pointed to the original React folder, to the new folder in the server. src="./public_html/static/js/main.f5239b39.js" – Enrico Commented Jul 26, 2018 at 6:18
• you changed the minified version of your index html to point script adresses somewhere else on the server ? – Jayffe Commented Jul 26, 2018 at 6:24
• Check if your <stylesheet> and <javascript> element have the expected type – v-gael Commented Jul 26, 2018 at 6:25
• @Jayffe, yes, I addressed on the server folder which is named public_html, where I stored the applicaton itself – Enrico Commented Jul 26, 2018 at 9:46

3 Answers 3

I solved the problem simply correcting the url.

since I was already accessing the "public" folder thanks to the "./" typing in the beginning of the url, there was no need to type "./public".

Thank you anyway.

Just edit webpack config by editing this:

     devServer: {
       historyApiFallback: true
          }

And also add this to public/index.html:

  <base href="/" />

Hope this help

In the network tab in dev tools, you can check the path the request is trying to make to check that the correct file path is being called by your build index.html paths to the .js file and the .css files. If the paths are relative ie. ./ instead of absolute / then it will search for the static files after the full URL instead of the base URL used for the app. I developed a vite react app, so I had to change the vite.config.js file to make the base path '/' instead of './' and then re-run npm run build. This rebuilds the index .html file with absolute paths to the collected static js and css files, and made the deployed version work better. My files were put into a /dist folder which by the way was listed by default in the git ignore so I also had to change the .gitigmore as well before re-deploying.