docs.a374.ru

Энгуларъ + Огонёкъ

img

Development
Нужные команды для директории проекта

Запуск проекта ангуляр: ng s -o

Выбор проекта: firebase use --add

Запуск эмулятора Firestore: firebase emulators:start --only firestore

Сохранение данных базы Firestore: firebase emulators:export your-name

Аутенцификация Firebase: firebase login

Порт интерфейса: 4000

Сборка проекта: ng build --output-path docs --base-href /your-name/

Разворот проекта

!!! Все команды выполняются в дирректории проекта…

Нам нужно развернуть, а потом запустить проект Angular CLI. Далее подключить к проекту базу данных Firebase. Настроить connect и обработку сообщений в базе данных с помощью авторизации Google аккаунта. Установить локальный эмулятор Firebase и настроить разработку с локальной тестовой ФБД. Ниже приводится последовательные шаги развертывания приложения Angular 15.

Что нам нужно

  1. Аккаунт Google.
  2. Аккаунт Firebase.
  3. Настройки указанные в документациях приложений.
  4. Умение пользоваться Angular CLI и менеджером NPM.
  5. Редакор кода.
  6. Название проекта, лучше бы, совпадало с именем БД.

Запуск

Все действия выполняются в терминале…

  1. Установите Angular CLI.
  2. Создайте проект командой: ng new projectName.
  3. Перейдите в директорию проекта cd projectName.
  4. Разверните (установите) FireBase командой: npm install -g firebase-tools.
  5. Активируйтесь командой: firebase login.
  6. Добавьте в проект директорию src/environments и в нее два файла с именами environment.ts и environment.prod.ts и внесите в файлы код указанный далее:
// environment.prod.ts
export const environment = {
	production: true
}

// environment.ts
export const environment = {
	production: false
}
  1. Установите пакет NPM командой: ng add angular/fire. При настройке пакета выберите Firestore и нужную DB или создайте новую DataBase следуя подсказкам в консоле. В предлагаемом меню выьерите пункт ( • ) Firestore.

Полсе выполнения выше указанных инструкций у вас должен быть настроенный проект Angular с подключенной онлайн БД Firebase. Проверте настройки базы в файле environment.ts.

Далее изучайте операции CRUD для данной БД.

Настройка Эмулятора БД

Ознакомтесь с документацией для эмулятора здесь… Нужно иметь общие представления о продукте.

Если проект projectName настроен как показано выше и он работает, то можно приступить к настройке эмулятора. Эмулятор умеет выполнять все операции облачного сервиса firebase но только локально.

Далее все операции выполняются в терминале – текущего каталога projectName:

  1. Установка эмулятора: curl -sL firebase.tools | bash
  2. Инициализируйте текущий проект: firebase init
  3. Запуск неподключенного к проекту эмулятора: firebase emulators:start

Настройка текущего проекта для взаимодействия с запущенным эмулятором или в ином случае с web version Firestore в интеренете.

Редакция файла environment.ts:

export const environment = {
  firebase: {
    projectId: 'project-name',
    appId: 'x:xxxxxxxxxx:web:xxxxxxxxxxxxxxx',
    storageBucket: 'project-name.appspot.com',
    apiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    authDomain: 'project-name.firebaseapp.com',
    messagingSenderId: 'xxxxxxxxxx',
  },

  // для пользования эмулятора FDB добавляется эта строка
   ///////////////
	useEmulators: true,
   //////////////

  production: false

}

Редакция файла environment.prod.ts:

export const environment = {

// И эта строка добавляется
   ///////////////////
	useEmulators: false,
   ///////////////////

	production: true
}

Редакция файла app.module.ts:

В данной настройке используется объект Firestore, добавленный в импортах. В методе провайдере provideFirestore(), подключается эмулятор на определенном по умолчанию порте:8080 локального хостинга. Если же вы запустите проект без эмулятора, то проект сконектится по умолчанию с Friebase на веб-хостинге согласно методу getFirestore().

 provideFirestore(() => {
      let firestore: Firestore;
      if (environment.useEmulators) { firestore = initializeFirestore(getApp(), { experimentalForceLongPolling: true, });
    connectFirestoreEmulator(firestore, 'localhost', 8080);
      } else {
        firestore = getFirestore();
      }
      return firestore;
    }),

После изменения кода в методе provideFirestore() появятся ошибки, тогда обновите импорты, добавив нужные классы и методы вверху страницы.

Отредактируйте строку запуска в файле проекта package.json

"start": "firebase emulators:exec --project=ascript --ui 'ng s -o'"

Запустите проект с эмулятором Firebase командой: npm start.

Отредактируйте параметр сборки файле проекта package.json

Добавьте в файл package.json в раздел production строки кода указанные ниже. Этот код нужен для того, чтобы при сборке приложения ng build проект конектился не к эмулятору, а к настоящей базе данных Firestore.

"fileReplacements": [
  { 
  "replace": "src/environments/environment.ts",
  "with": "src/environments/environment.prod.ts"
  }
]

Должно сработать. Конечно не с первого раза! Как обычно. Не поленитесь потратьте время на изучение документации настройки проектов Firebase.

Сборка проекта для публикации

ng build --output-path docs --base-href /your-name/


img


     
← назад 🔝 далее →