Пустая страница после успешного развертывания Firebase

Question

Мое приложение ReactJs отлично работает на моем локальном компьютере, когда я использую команду npm start. Однако, когда я пытаюсь развернуть свое приложение, используя 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 в firebase.json не работает, то сначала выясните, в какой папке находится ваш файл index.html, убедитесь, что вы написали index.html, потому что firebase может привести к ложному выводу index.html в основной папке и переместите ваш index.html в папку «build», в папке «build» может также быть другая папка с именем вашего приложения. Затем вам нужно изменить свойство public в firebase.json на имя этой папки, например:

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

Answer 2

100% Рабочий пример.

Устранена ошибка пустой страницы в хостинге приложений React в Firebase.

Нашли решение в этом блоге

Разместите ваше React Web App за несколько минут.

Неправильная последовательность =>

логин firebase

firbase init

развертывание Firebase

npm run build

Правильная последовательность =>

firebase login

firbase init

npm run build

развертывание Firebase

Answer 3

Убедитесь, что у вас не установлено свойство homepage внутри package.json. У меня было это, потому что я также сначала развертывал на страницах Github. Удалил, перестроил, развернул и работал.

Answer 4

После того, как вы инициализировали свое приложение Firebase с firebase init, у вас должен быть файл firebase.json в папке вашего проекта. Дело в том, что открытый ключ должен указывать на вашу папку сборки. Например, в create-реагировать-приложение папка сборки build / после того, как вы впервые запустили npm и запустите build . Тогда firebase.json должен выглядеть примерно так:

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

Открытый ключ указывает на сборку. Затем попробуйте другое развертывание с firebase deploy .

Answer 5

Еще одна вещь, которую вы также можете проверить, если изменение файла firebase.json не работает.

1. в инструментах разработчика Chrome перейдите на Application->Clear Storage
2. нажмите clean site data
3. затем refresh приложение.

В некоторых случаях это работает.

Answer 6

У меня была такая же проблема. http://localhost:3000/ хорошо обслуживал приложение, но когда я развернул с помощью npm run build, а затем firebase deploy, я просто увидел пустую страницу.

Я не уверен в причине, но я изменил свойство public в firebase.json на «build», и оно сработало.

вот мой новый документ firebase.json.

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

Answer 7

Взгляните на public вашу собственность package.json

"public": "public",

Указывает на папку ресурсов, где хостинг Firebase будет искать ваше приложение. Если папка ресурса пуста, вам будет представлена ​​пустая страница

При создании приложения реагирования все файлы по умолчанию помещаются в папку build, если не указано иное. Так что установите публичное свойство в вашей папке Сборка реагировать.