Question

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

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

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

一行，因为我遇到了与此相关的错误。

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输出：

Answer 1

我遇到了同样的问题。 http://localhost:3000/很好地运行了该应用程序，但是当我使用firebase deploy进行部署，然后{ "hosting": { "public": "build", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } }部署时，我只是看到一个空白页面。

我不确定原因，但我将firebase.json中的“ public”属性更改为“ build”，并且有效。

这是我新的firebase.json文档。

https://dialogflowappnc.azurewebsites.net:7001/

Answer 2

看看您的public的{{1}}属性

package.json

它指向Firebase托管将在其中查找您的应用程序的资源文件夹。如果资源文件夹为空，将显示空白页

在构建React应用时，如果没有另外指定，默认情况下所有文件都转到"public": "public",文件夹中。因此，将公共属性设置为您的reactjs构建文件夹。

Answer 3

使用firebase init初始化Firebase应用程序后，您的项目文件夹中应该有一个 firebase.json 文件。关键是公钥必须指向您的构建文件夹。例如，在create-react-app中，第一次运行 npm run build 后，构建文件夹为 build / 。然后 firebase.json 看起来必须与此类似：

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

要构建的公钥。然后尝试使用 firebase deploy 进行另一次部署。

Answer 4

检查是否没有在package.json中设置homepage属性。之所以拥有它，是因为我一开始也要部署到Github页面。删除它，对其进行重建，重新部署和工作。

Answer 5

我有同样的问题。但是在指向构建文件夹之后。。。我仍然看到一个空白的主机。在这种情况下，您可以复制包含firebase初始化代码的构建文件夹，并将其粘贴到公用文件夹中。确保将<div id=root> </div>添加到正文部分，然后再次添加npm run build。还要确保您的firebase.json指向之前的文章中提到的构建。

Answer 6

删除 .firebase 文件夹
删除您的构建文件夹并通过“npm run build”重新构建它
然后再次通过“firebase init”初始化您的应用
您想使用什么作为您的公共目录？ build // 直接public 应该是build
配置为单页应用程序（将所有 URL 重写为 /index.html）？是 // 重写规则是
使用 GitHub 设置自动构建和部署？ (y/N) n // 自动构建 no
文件 build/index.html 已经存在。覆盖？ (y/N) n // 不应该重写 index.html 最重要的部分
firebase deploy // 一切顺利。

Answer 7

如果您也将它部署到 GitHub，只需从 package.json 文件中删除 homepage 键。它对我有用，希望对你也有用。

Answer 8

您可能还需要检查一下更改firebase.json文件是否无效。

在Chrome开发者工具中，转到Application->Clear Storage
点击clean site data
然后refresh应用。

在某些情况下，它可以工作。

Answer 9

如果在firebase.json中更改'public'属性无效，则首先找出index.html文件在哪个文件夹中，请确保它是您编写的index.html，因为firebase可能会放置模拟将index.html移至主文件夹中，然后将index.html移至“ build”文件夹中，它可能还会在“ build”文件夹中包含另一个名称为您的应用程序的文件夹。然后，您需要将firebase.json中的'public'属性更改为该文件夹的名称，如下所示：

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

Answer 10

100％工作示例。

解决了Firebase中的React App Hosting中的空白页错误。

在此blog

中找到了解决方案

在几分钟内托管您的React Web App。

错误的序列=>

firebase登录

firbase初始化

firebase部署

npm运行构建

正确的序列=>

firebase登录

firbase初始化

npm运行构建

firebase部署

Answer 11

我发现 Firebase 托管需要一些时间来运行您的所有网站。对我来说，第一次上传最多需要大约 30 分钟。后续更新应立即上传。

如果您在检查器开发人员工具中注意到只有 html 页面处于活动状态，而页面的其余部分没有，那么这可能是解决方案。

所以我的建议是耐心喝杯咖啡:)

Answer 12

使用构建进行构建

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

成功部署Firebase后的空白页

12 个答案: