Blank page after successful Firebase deployment

Question

My ReactJs application runs fine on my local box, when I use the npm start command. However when I try to deploy my application using the firebase init to Firebase, I am seeing a blank page. What could I be doing wrong?

Update: I had to edit the Firebase.json file to remove the

"predeploy": ["npm --prefix \"$RESOURCE_DIR\" run lint"],

line as I was getting errors related to that.

Firebase.json:

{
  "database": {
    "rules": "database.rules.json"
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "source": "functions"
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  },
  "storage": {
    "rules": "storage.rules"
  }
}

Firebase deploy command output:

=== Deploying to 'socialmedia-5ec0a'...

i  deploying database, storage, firestore, functions, hosting
i  database: checking rules syntax...
+  database: rules syntax for database socialmedia-5ec0a is valid
i  storage: checking storage.rules for compilation errors...
+  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
+  firestore: rules file firestore.rules compiled successfully
i  functions: ensuring necessary APIs are enabled...
+  functions: all necessary APIs are enabled
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  functions: preparing functions directory for uploading...
i  hosting[socialmedia-5ec0a]: beginning deploy...
i  hosting[socialmedia-5ec0a]: found 5 files in public
+  hosting[socialmedia-5ec0a]: file upload complete
i  database: releasing rules...
+  database: rules for database socialmedia-5ec0a released successfully
+  storage: released rules storage.rules to firebase.storage/socialmedia-5ec0a.appspot.com
+  firestore: released rules firestore.rules to cloud.firestore
i  hosting[socialmedia-5ec0a]: finalizing version...
+  hosting[socialmedia-5ec0a]: version finalized
i  hosting[socialmedia-5ec0a]: releasing new version...
+  hosting[socialmedia-5ec0a]: release complete

+  Deploy complete!

Project Console: https://console.firebase.google.com/project/socialmedia-5ec0a/overview
Hosting URL: https://socialmedia-5ec0a.firebaseapp.com

Chrome F12 output:

I had the same issue, but **solved** by changing `"hosting"` to `"public": "build"`, run `npm run build` again, and then `firebase deploy` — nambk, Dec 19 '20 at 17:00

score 64 · Accepted Answer · answered Sep 05 '18 at 13:39

64

I was having the same problem. http://localhost:3000/ was serving the app well but when I deployed using npm run build and then firebase deploy I was just seeing a blank page.

I am not sure of the reason why, but I changed the 'public" property in the firebase.json to "build" and it worked.

here is my new firebase.json document.

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

answered Sep 05 '18 at 13:39

Will Goodhew

726
5
9

2

I used the npm run-script build command to generate the build files. – Ajit Goel Sep 06 '18 at 04:35
5

What is the point of posting the exact same answer as me, 8h after I posted mine?? – DarkLeafyGreen Sep 06 '18 at 05:29
This setting would point the public folder to your build folder... which in this case is where the built files are :) – doublejosh Feb 29 '20 at 23:55
1

You also need to ensure you at least have these items in your package.json scripts... ```"scripts": { "start": "react-scripts start", "build": "react-scripts build", "predeploy": "npm run build", "deploy": "firebase build" }``` – doublejosh Feb 29 '20 at 23:57
1

In my case i needed to have "public":"build" and need to add the "rewrites" array to my firebase.json document. – Loren Mar 24 '20 at 15:00
Thanks for this answer. When you run "firebase init", it asks "? What do you want to use as your public directory?". If you answer "build" here, instead of accepting the default value of "public", it will result in the same behavior. (One would have to execute "npm run build" before this, to ensure it works) – Moni Jun 07 '21 at 15:07

Robin Wieruch · Answer 2 · 2020-01-29T20:58:52.763

After you have initialized your Firebase application with firebase init, you should have a firebase.json file in your project's folder. The thing is that the public key has to point to your build folder. For instance, in create-react-app the build folder is build/ after you have ran npm run build for the first time. Then the firebase.json has to look similar to this one:

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

The public key points to build. Then try another deploy with firebase deploy.

score 14 · Answer 3 · answered Sep 05 '18 at 05:57

Have a look at the public property of you package.json

"public": "public",

It points to the resource folder where firebase hosting will look for your application. If the resource folder is empty, you will be presented with a blank page

When you build your react app, all the files go to the build folder by default, if you have not specified otherwise. So set the public property to your reactjs build folder.

score 11 · Answer 4 · answered Feb 22 '19 at 19:23

11

Check you don't have the homepage property set inside package.json. I had it because I was also deploying to Github pages at first. Removed it, rebuilt, redeployed and worked.

answered Feb 22 '19 at 19:23

ariel guzman

590
7
11

This was the solution for me. While watching the dev tools it kept trying to pull static files from a url based on the homepage property. Deleted the property and everything worked. – Nogg May 12 '19 at 04:04
This was the solution for me too. So I choose firebase over Github. – Aug 01 '19 at 22:04
spent an hour trying to fix this and then this worked. I was starting to questioning my career choice thx Ariel – Cyrus Zei Mar 12 '23 at 20:20

score 8 · Answer 5 · edited Oct 16 '18 at 10:11

8

Another thing you might also check if changing the firebase.json file does not work.

in the Chrome dev tools, go to Application->Clear Storage
click on clean site data
then refresh the app.

In some cases, it works.

edited Oct 16 '18 at 10:11

Rarblack

4,559
4
22
33

answered Oct 16 '18 at 09:29

Daniel Lupascu

81
2

score 6 · Answer 6 · answered Feb 05 '21 at 08:20

delete .firebase folder
delete your build folder and build it again by "npm run build"
Then again initialize your app by "firebase init"
What do you want to use as your public directory? build // public directly should be build
Configure as a single-page app (rewrite all URLs to /index.html)? Yes // rewrite rules yes
Set up automatic builds and deploys with GitHub? (y/N) n // automatic builds no
File build/index.html already exists. Overwrite? (y/N) n // should not rewrite the index.html most important part
firebase deploy // you are good to go.

score 3 · Answer 7 · answered Jun 09 '21 at 13:49

3

Just remove homepage key from the package.json file if you deployed it to GitHub also. It worked for me hope so for you as well.

answered Jun 09 '21 at 13:49

Gaurav Kumar

121
1
2

score 3 · Answer 8 · answered Jul 24 '21 at 00:17

I found that firebase hosting requires some time to get all your website running. For me, it takes up to ~30 minutes for the first time it uploads. Subsequent updates should upload in an instant.

If you notice in the inspector developer tools, that only the html page is active and not the rest of the page, then this might be the solution.

So my advice is just to be patient and grab a cup of coffee :)

score 1 · Answer 9 · answered Feb 05 '20 at 01:03

I had the the same problem. But after the build folder was pointed to. . . I was still seeing a blank host. In this case what you can do is copy the build folder which contains the firebase init code, and paste it into the public folder. Make sure that you add in your <div id=root> </div> into the body section, then npm run build again. Make sure also that your firebase.json is pointing to build as mentioned in earlier posts.

Aleksandar Malenko · Answer 10 · 2019-04-03T22:24:50.403

If changing the 'public' property in the firebase.json doesn't work then first find out in which folder is your index.html file, make sure it's the index.html that you wrote, cause firebase might put a mock index.html in the main folder and move your index.html in a 'build' folder, it might also have another folder with the name of your app inside the 'build' folder. Then you need to change the 'public' property in the firebase.json to the name of that folder, like this:

     {
      "hosting": {
        "public": "my-app",
        "ignore": [
          "firebase.json",
          "**/.*",
          "**/node_modules/**"
        ],
        "rewrites": [
          {
            "source": "**",
            "destination": "/index.html"
          }
        ]
      }
    }

score 0 · Answer 11 · answered Jun 08 '23 at 13:35

To solve the issue, follow these steps:

Navigate to the build folder and locate the index.html file.
In the index.html file, within the HTML body, you will find the following line: <div id="root"></div>.
At the top of the folder, you will see a script tag that connects to JavaScript. It should look like this:

<script defer="defer" src="./static/js/main.36b3b093.js"></script>

Modify the src path according to your desired folder structure for the main.36b3b093.js file. Normally, it is located under the static folder within a subfolder named js.

score -1 · Answer 12 · edited Nov 27 '20 at 12:33

-1

use build to build

{
  "hosting": {
    "build": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

edited Nov 27 '20 at 12:33

Donald Duck

8,409
22
75
99

answered Nov 27 '20 at 06:52

Fawas am

1

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Donald Duck Nov 27 '20 at 12:31

score -5 · Answer 13 · edited May 24 '19 at 15:00

-5

100% Working Example.

Solved Blank Page Error in React App Hosting in Firebase .

Found solution in this blog

Host Your React Web App in few minutes.

Wrong sequence =>

firebase login

firbase init

firebase deploy

npm run build

Correct sequence =>

firebase login

firbase init

npm run build

firebase deploy

edited May 24 '19 at 15:00

Prashant Yalatwar

159
1
3

answered May 24 '19 at 10:48

Amazing Apps

219
3
5

Blank page after successful Firebase deployment

13 Answers13

Linked