Firebase - размещение файлов в нескольких каталогах

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

public directory
  views
    index.html
    register.html
    terms.html
    privacy.html
    support.html
  stylesheets
    styles.css
  scripts
    script.js
    authentication.js

но вместо этого он выглядит как

public
  index.html
  register.html
  terms.html
  privacy.html
  support.html
  script.js
  authentication.js
  styles.css

Вот мой firebase.json файл

   {
  "firebase": "funmathgame",
  "public": "mathgame",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

Вот сообщение об ошибке, которое я получаю

Страница не найдена

Файл не существует и не существует index.html, найденного в текущем каталоге, или 404.html в корневом каталоге.

Почему я вижу это?

Возможно, вы использовали неверный каталог для своего приложения. Проверьте firebase.json и убедитесь, что каталог public указывает на каталог, содержащий файл index.html.

Вы также можете добавить 404.html в корень вашего сайта, чтобы заменить эту страницу на странице пользовательских ошибок.

Первая структура лучше, потому что она отделяет код. Эта структура работает всякий раз, когда я запускаю файлы в текстовом редакторе. Однако он не работает, когда я развертываю firebase.

В качестве примера я хотел бы ссылаться на мои таблицы стилей

<head>
  <title>Frequently Asked Questions</title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css'> 
  </link>
<link rel='stylesheet' href='../stylesheets/styles.css'></link>

В приведенной выше структуре каталогов я попал в каталог public/views. Я использую .. для перемещения одного каталога в общий каталог и затем пересылки в каталог stylesheets. Однако здесь мой файл index.html находится не в общедоступном каталоге, а в каталоге public/views.

Я посмотрел сайт Firebase, но до сих пор не могу найти никаких идей.

https://www.firebase.com/docs/hosting/guide/full-config.html

Ответы

Ответ 1

Если вы хотите иметь /views/index.html в адресной строке приложения, вы можете просто сделать перенаправление с /, добавив redirects на ваш firebase.json. Также похоже, что ваш атрибут public может быть неправильным. Поэтому измените файл firebase.json на:

{
  "firebase": "funmathgame",
  "public": "public",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ],
  "redirects": [
    {
      "source": "/",
      "destination": "/views/index.html",
      "type": 302
    }
  ]
}

Таким образом, любой пользователь, который переходит на https://funmathgame.firebaseapp.com/, будет перенаправлен на https://funmathgame.firebaseapp.com/views/index.html, и все относительные URL-адреса будут разрешены правильно.

Ответ 2

Это была трудная проблема. Когда вы развертываете Firebase, Firebase ищет файл index.html внутри вашего общего каталога. Этот общий каталог также известен как корневой каталог.

Я работал с приложением angular, и я просто использовал неправильные пути в своих частях. Это было довольно сложно.

Мне пришлось настроить контроллер angular, который ввел значение $document, чтобы получить заголовок страницы. Если заголовок страницы соответствует заголовку корневой страницы, я бы использовал ng-href, чтобы добавить каталог views в относительный URL-адрес.

В противном случае, если бы вы были в каталоге представлений и искали больше видов, он показывал бы путь, например views/views/page1.html. Вот почему у нас был бы другой ng-href условный для них.

Это то, что моя навигация выглядела как

<ul class='nav navbar-nav'>

        <li><a ng-href="{{ page == home ? 'views/help.html' : 'help.html' }}">Help</a></li>
        <li><a ng-href="{{ page == home ? 'views/achievements.html' : 'achievements.html' }}">Achievements</a></li>
        <li><a ng-href="{{ page == home ? 'views/scores.html' : 'scores.html' }}">Scores</a></li>
        <li><a ng-href="{{ page == home ? 'views/shop.html' : 'shop.html' }}">Shop</a></li>
        <li><a ng-href="{{ page == home ? 'views/faq.html' : 'faq.html' }}">FAQs</a></li>
        <li><a ng-href="{{ page == home ? 'views/related.html': 'related.html' }}">More Games</a></li>
</ul>

В конце концов, моя структура каталогов выглядела так:

public
  assets
    stylesheets
      styles.css
  views
    partials
      scripts.html
      header.html
      footer.html
    page1.html
    ...
  scripts
    controllers
    script1.js
    ...
  index.html

Можно также поместить индексный файл в каталог представлений, если вы изменили файл firebase.json.

{
    "firebase": "firebase-app",
    "public": "root/views",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
}

Вы просто изменяете ключевое слово public в приложении firebase. Это заняло много сил, потому что я забыл, что мне пришлось условно менять пути. Кроме того, чтобы вернуться в предыдущий каталог, вам нужно сделать что-то вроде ../

Ответ 3

Я думаю, что этот сайт может вам помочь: https://www.firebase.com/blog/2014-08-12-switching-to-firebase.html

В частности,

Так как Firebase импортирует один файл, а некоторые службы экспортируют несколько файлов, Ive создал удобный python script, который преобразует несколько файлов в один дезактивированный файл Firebase.