Create-react-app: Firebase deploy blanc page

[harrymelka]

Hello,
I have met an issue with the firebase deployment. When I do the firebase deploy command everything works fine but when I go to the link from firebase, it shows a blanc page. I inspected it with chrome inspector and I see that this is my index.html but it doesn't go and root my real index.js page from my react project.

Configuration React Project

firebase 4.2.0
react 16.1.1
react-router 3.2.0
redux 3.7.2

firebase.json

public/index.html

Source

I have been following :
https://gautamthapar.me/deploying-react-app-firebase/#comment-309
https://medium.com/@bensigo/hosting-your-react-app-with-firebase-hosting-add1fa08c214

The link that firebase give me after deploy: https://smartbatz-502a2.firebaseapp.com/

If you have any idea, thank you

[SSTPIERRE2]

@harrymelka hey did you find what happened with this? I followed tutorials that made it look simple but I just get a blank page.

[Herohtar]

I came across this issue while searching for a solution to a problem that sounds similar to this. I have a create-react-app site that was previously deployed to Firebase just fine; however, after making some updates and re-deploying it, it no longer works. Everything generates into the build folder correctly, and it tells me the same number of files are deployed, but it seems that only the index.html and 404.html files are actually on the server. The .js and .css files that should be rendering the app give a 404 error. They are clearly there in the folder and the site works when I serve it locally.

[Stas-Buzunko]

https://github.com/facebook/create-react-app/issues/3882#issuecomment-362590606 worked for me
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting

[harrymelka]

@SSTPIERRE2 yes I found how to fix it. When you try to deploy your solution, verify that your build folder is the right one that you use when you are using the command to initialise your project.

You can make some test by adding stuff like
<h1>Hello World</h1>
inside your index.html and another header to the other index.html and check which one is working.

[Herohtar]

The issue for me was a bug in firebase-tools that caused it to not deploy files correctly. I had to temporarily downgrade to an older version, but it has since been fixed.

[MincePie]

Hi @Herohtar - I'm trying to solve this same problem. I'm working through solutions that seem to have helped others, but not getting anywhere. What is the firebase-tools problem and how did you fix it? Or - do you think that problem no longer exists?

[MincePie]

@harrymelka - how did you solve the problem of the build/index.html not correctly reading from your src/index.html? I copied the src/index.html file over, because when i first initialised the fireabase app - it replaced my index.html with a firebase hosting notice. I realised then that the previous version of the build did not update when I changed the meta tags. But what can be done to solve that problem?

[Herohtar]

@MincePie The issue that was causing the problem for me was a bug with the deploy caching in firebase-tools that caused certain files to not actually be uploaded like they were supposed to. I temporarily used an older version to work around it, but they fixed the bug so if you have the latest version it shouldn't be that.