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:

Answer 1

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"
      }
    ]
  }
}

Answer 2

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.