成功部署Firebase后的空白页 [英] Blank page after successful Firebase deployment

问题描述

当我使用npm start命令时，我的ReactJs应用程序在我的本地机器上运行良好.但是，当我尝试使用firebase init将应用程序部署到Firebase时，看到的是空白页面.我可能做错了什么?

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?

更新:我必须编辑Firebase.json文件才能删除

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部署命令输出:

=== 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输出:

推荐答案

我遇到了同样的问题. http://localhost:3000/很好地运行了该应用程序，但是当我使用npm run build然后firebase deploy进行部署时我只是看到一个空白页.

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.

我不确定原因，但是我将firebase.json中的"public"属性更改为"build"，并且可以正常工作.

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

这是我新的firebase.json文档.

here is my new firebase.json document.

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

这篇关于成功部署Firebase后的空白页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！