Хостинг с помощью платформы Firebase

​

​
Firebase- это платформа для разработки приложений от компании Google, в которой есть самые современные функции для разработки, перекомпоновки и улучшения приложений. По своей сути, набор инструментов, которые разработчики могут использовать, создавая и изменяя приложения в зависимости от своей потребности.

В этой теме мы обсудим следующие вопросы:

  • Создание проекта на платформе;
  • Установка сопутствующих инструментов;
  • Отправка сайта на хостинг.
Для начала создадим наш проект, перейдя на страницу
Please, Log in or Register to view URLs content!
, зарегистрировавшись через аккаунт Google, или авторизовавшись через него.


Главная страница Firebase
​
Нажимаем на кнопку "Get started" и переходим на следующую страницу:


Страница проектов
​
Создадим новый проект, нажав "Create a project":


Настройка проекта "Название"​

Вводим название проекта (от него зависит внешний вид ссылки, имейте это в виду), после этого настраиваем аналитику нашего проекта, это всё опционально, но обычно я использую следующие настройки:


Настройка проекта "Аналитика"
​
Ждём создание проекта и теперь перед нами главная страница проекта, на ней в боковом меню выбираем "Hosting", он находиться в вкладке "Build" (На момент создания темы):


Главная страница проекта​

Здесь нам нужно добавить хостинг в наш проект, нажатием на "Get started":


Страница хостинга
​
Здесь нас просят поставить Firebase CLI, для этого нам нужен
Please, Log in or Register to view URLs content!
(скачиваем и устанавливаем в зависимости от совей платформы):


Страница скачивания node.js
​
После скачивания и установки node.js нам нужно запустить PowerShell или Cmd (что вам удобней). Для проверки установки node.js используется команда node -v:


Проверка установки, путём получения версии
​
Теперь мы можем провести процесс установки Firebase CLI, введя команду npm install -g firebase-tools:



Процесс установки
​
После этого нам нужно войти в свой аккаунт, попробовав ввести команду firebase login:


Ошибка вовремя входа
​
Если у вас вылезла эта ошибка, не пугаемся, а вводим команду Get-ExecutionPolicy unrestricted , после чего вводим "Y"и нажимаем "Enter":


Исправление политики выполнения скриптов​

Теперь пробуем ещё раз войти в Firebase:


Запрещаем сбор информации о использовании CLI (Опционально)​

После этого нас перебрасывает в браузер, где входим свой аккаунт и разрешаем его использовать:


Вход в аккаунт​

После этого браузер можно закрыть и снова вернуться в командную строку (в моём случае PowerShell), где нас поздравляют с удачным входом:


Сообщение о удачном входе
​
Теперь мы можем снова воспользоваться командной строкой или перейти в редактор кода (если он поддерживает терминал). Я буду использовать
Please, Log in or Register to view URLs content!
. Нам нужно перейти в каталог с нашим сайтом и подняться из него вверх прописав cd..:
  • Firebase\Hosting\index​
  • Firebase\Hosting​
Затем вводим команду firebase init, нас спросят о своей готовности, само собой пишем "Y" и идём дальше:


Подготовка к инициализации
​
Теперь нам нужно выбрать инструмент, который мы хотим использовать, в данном случае нам нужен хостинг, поэтому выбираем "Hosting: Configure files for Firebase Hosting and (optionally) set up Github Action deploys", нажатием "Пробела" и последующим подтверждением кнопкой "Enter":


Выбор инструмента​


После этого выбираем существующий проект (Use an existing project), нажав "Enter":



Выбор проекта​

После этого настраиваются дополнительные настройки, важная из которых это название папки с нашим сайтом (What do you want to use as your public directory?), в моём случае папка называется index. Далее просто нажимаем "Enter" отвечая на всё "N" так как Github мне не нужен и index.html у меня уже есть:


Завершение инициализации Firebase​

Последнее что осталось сделать, так это отправить наш проект на хостинг, для этого пишем команду firebase deploy:


Отправка сайта на хостинг

Вот так просто можно захостить сайт при помощи платформы Firebase. Если кому интересно что получилось у меня переходите нажав
Please, Log in or Register to view URLs content!