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

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

"public": "public",

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

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

У меня была такая же проблема. http: // локальный: 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"
      }
    ]
  }
}

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

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

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

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

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

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

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

Если изменение свойства '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"
          }
        ]
      }
    }

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

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

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

Разместите свое веб-приложение на React за несколько минут.

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

firebase login

firbase init

firebase deploy

npm run build

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

firebase login

firbase init

npm run build

firebase deploy

У меня была такая же проблема. Но после того, как папка сборки была указана на. . . Я все еще видел пустой хост. В этом случае вы можете скопировать папку сборки, содержащую код инициализации firebase, и вставить ее в общую папку. Убедитесь, что вы добавили свой <div id=root> </div> в раздел body, а затем снова npm run build. Также убедитесь, что ваш firebase.json указывает на сборку, как упоминалось в предыдущих сообщениях.

использовать сборку для сборки

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

• удалить папку .firebase
• удалите папку сборки и создайте ее снова с помощью "npm run build"
• Затем снова инициализируйте свое приложение с помощью "firebase init".
• Что вы хотите использовать в качестве общедоступного каталога? build // public напрямую должен быть построен
• Настроить как одностраничное приложение (переписать все URL-адреса в /index.html)? Да // правила перезаписи да
• Настроить автоматическую сборку и развертывание с помощью GitHub? (y / N) n // автоматическая сборка нет
• Файл build / index.html уже существует. Перезаписать? (y / N) n // не следует переписывать самую важную часть index.html
• firebase deploy // все готово.

Просто удалите ключ homepage из файла package.json, если вы также развернули его на GitHub. У меня это сработало, надеюсь, и у вас тоже.

Я обнаружил, что хостингу firebase требуется некоторое время для запуска всего вашего сайта. Для меня загрузка первый раз занимает около 30 минут. Последующие обновления должны загружаться мгновенно.

Если вы заметили в инструментах разработчика инспектора, что активна только html-страница, а не остальная часть страницы, то это может быть решением.

Так что мой совет - наберитесь терпения и выпейте чашку кофе :)