Glajik/diet-routine

Guide for starter-kit creation

Glajik opened this issue · 0 comments

Glajik commented

Инструкция по созданию проекта на Firebase

Проект уже создан, см. ветку develop/starter-kit. Эту инструкцию решил создать на будущее, хотя к тому моменту все наверняка немного поменяется. Но может кому пригодится.

Note: Кстати документация по Firebase теперь доступна и на русском языке (машинный перевод, иногда корявый)

1. Create new Firebase project

Первым делом нужно зайти в консоль Firebase:

  • Перейти по ссылке Firebase console
  • Нажать кнопку Add Project и следовать мастеру

Вот инструкция по созданию проекта, с пояснениями - Setting up a Firebase project and registering apps
Посмотрите General Best practices
Обратите внимание на идентификатор проекта - project_id.
Найти project_id в случае чего, можно будет в Project Dashboard, меню Settings -> General -> Project ID

2. Add other collaborators to project

После того как проект будет создан - откроется Project Dashboard.

Чтобы добавить соавторов, нужно:

  • Зайти в настройки (шестеренка напротив Project Overview) вверху.
  • Выбрать пункт Users and permissions
  • Нажать кнопку Add member и добавить Gmail аккаунты. Можно несколько за раз через пробел.
  • Выбрать Roles - это права доступа к управлению. Может быть Viewer или Editor. Owner передает права владения, осторожно.

3. Set default GCP resource location

Без этого шага к сожалению при попытке инициализировать проект на PC будет возникать ошибка.

  • Там же в Settings -> General зайти и выбрать Default GCP resource location
    • Я выбрал eur3 (europe-west)
    • Сменить позже будет невозможно

4. Create Cloud Firestore Database

Без этого шага тоже не удастся инициализировать проект на PC, если там будет выбрана опция Database

  • Зайти в раздел Cloud Firestore, нажать Create database
  • В окне выбрать Start in test mode. Он устанавливает очень широкие правила доступа к базе в течении 30 дней. Но в продакшене конечно правила нужно будет строго настроить.

5. Initialize Firebase project on local PC

Подробнее Initialize a Firebase project

Если Firebase CLI был установлен ранее - тогда нужно обновить до последней версии
npm install -g firebase-tools

Итак процесс инициализации:

  • Установить Firebase CLI на ПК, следуя инструкции Install the Firebase CLI

  • Создать папку для проекта, открыть терминал и перейти в нее

  • Выполнить и перейти по ссылке для авторизации. Пройдите весь процесс.

    firebase login

  • Выполнить

    firebase init

  • При помощи стрелочек курсора и пробела выбрать опции, для проекта

    • Я выбрал полный набор, включая эмулятор для тестирования

  • Далее выбрать опцию Use an existing project

  • Затем нужно выбрать проект из списка, в нашем случае - diet-routine

  • Следующие вопросы пропускаем нажатием Enter - мы используем значение по умолчанию

    • What would you like to call your project?
    • What file should be used for Firestore Rules?
    • What file should be used for Firestore indexes?

  • Если вы видите ошибку Error fetching Firestore indexes - нужно значит нужно обновить Firebase CLI до последней версии.

  • What language would you like to use to write Cloud Functions?

    • Будем использовать JavaScript

  • Do you want to use ESLint to catch probable bugs and enforce style?

    • Yes

  • Do you want to install dependencies with npm now?

    • Yes

  • What do you want to use as your public directory?

    • Используем по умолчанию

  • Configure as a single-page app (rewrite all urls to /index.html)?

    • Yes

  • What file should be used for Storage Rules?

    • По умолчанию

  • Emulators Setup

    • Выбираем Functions, Datastore, Hosting

  • Для вопросов используем значение по умолчанию

    • Which port do you want to use for the functions emulator?
    • Which port do you want to use for the database emulator?
    • Which port do you want to use for the hosting emulator?

  • Would you like to enable the Emulator UI?

    • Yes

  • Which port do you want to use for the Emulator UI

    • Пропускаем, Enter

  • Would you like to download the emulators now?

    • Yes

Вы можете быть уже авторизированы, например для другого аккаунта. Тогда нужно выполнить firebase logout

6. Create web client

  • Установить утилиту. Если установлена давно, лучше обновить.

    npm install -g create-react-app

  • Из корневой папки проекта выполнить

    npx create-react-app web-client --template redux

  • Изменяем в файле firebase.json путь к папке build внутри веб клиента

    "hosting": {
  "public": "web-client/build",

  • Старая папка public больше не нужна