成功部署 Firebase 后出现空白页面

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

看看public属性的你们package.json

"public": "public",

它指向 firebase 托管将在其中查找您的应用程序的资源文件夹。如果资源文件夹为空，您将看到一个空白页面

当你构建你的 React 应用程序时，如果你没有另外指定，所有文件默认都会进入 build 文件夹。因此，将 public 属性设置为您的 reactjs 构建文件夹。

Answer 2

我遇到了同样的问题。 http://localhost:3000/ 很好地为应用程序提供服务，但是当我使用 npm run build 部署然后 firebase deploy 我只是看到一个空白页面。

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

这是我的新 firebase.json 文档。

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

Answer 3

如果更改 firebase.json 文件不起作用，您还可以检查另一件事。

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

在某些情况下，它有效。

Answer 4

使用 firebase init 初始化 Firebase 应用程序后，您的项目文件夹中应该有一个 firebase.json 文件。问题是 public 键必须指向您的构建文件夹。例如，在 create-react-app 中，构建文件夹是 build/ 在你有运行 npm 运行 build 之后首次。那么 firebase.json 必须看起来类似于这个：

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

public 重点建设。然后尝试使用 firebase deploy.

进行另一个部署

Answer 5

请检查您没有在 package.json 中设置 homepage 属性。我有它是因为我一开始也部署到 Github 页面。删除它，重建，重新部署和工作。

Answer 6

如果更改 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 7

100% 工作示例。

解决了在 Firebase 中托管 React 应用程序时的空白页面错误。

在此blog

中找到解决方案

在几分钟内托管您的 React Web 应用程序。

顺序错误=>

firebase login

firbase init

firebase deploy

npm run build

正确的顺序=>

firebase login

firbase init

npm run build

firebase deploy

Answer 8

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

Answer 9

使用构建来构建

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

Answer 10

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

Answer 11

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

Answer 12

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

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

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

成功部署 Firebase 后出现空白页面

Blank page after successful Firebase deployment

web-applications

npm

firebase

reactjs

firebase-hosting