Запуск проекта ангуляр: ng s -o
Выбор проекта для fdb: firebase use --add
Запуск эмулятора fdb: firebase emulators:start --only firestore
Аутенцификация fdb: firebase login
Порт интерфейса: 4000
!!! Все команды выполняются в дирректории проекта…
Нам нужно развернуть, а потом запустить проект Angular CLI
. Далее подключить к проекту базу данных Firebase
. Настроить connect
и обработку сообщений в базе данных с помощью авторизации Google
аккаунта.
Установить локальный эмулятор Firebase
и настроить разработку с локальной тестовой ФБД.
Ниже приводится последовательные шаги развертывания приложения Angular 15
.
Google
.Firebase
.Angular CLI
и менеджером NPM
.Все действия выполняются в терминале…
Angular CLI
.ng new projectName
.cd projectName
.FireBase
командой: npm install -g firebase-tools
.firebase login
.src/environments
и в нее два файла с именами environment.ts
и environment.prod.ts
и внесите в файлы код указанный далее:// environment.prod.ts
export const environment = {
production: true
}
// environment.ts
export const environment = {
production: false
}
NPM
командой: ng add angular/fire
. При настройке пакета выберите Firestore
и нужную DB
или создайте новую DataBase
следуя подсказкам в консоле. В предлагаемом меню выьерите пункт ( • ) Firestore
.Полсе выполнения выше указанных инструкций у вас должен быть настроенный проект Angular
с подключенной онлайн БД Firebase
. Проверте настройки базы в файле environment.ts
.
Далее изучайте операции
CRUD
для данной БД.
Ознакомтесь с документацией для эмулятора здесь… Нужно иметь общие представления о продукте.
Если проект projectName
настроен как показано выше и он работает, то можно приступить к настройке эмулятора. Эмулятор умеет выполнять все операции облачного сервиса firebase
но только локально.
Далее все операции выполняются в терминале – текущего каталога
projectName
:
curl -sL firebase.tools | bash
firebase init
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
.
Должно сработать. Конечно не с первого раза! Как обычно. Не поленитесь потратьте время на изучение документации настройки проектов Firebase
.
← назад | 🔝 | далее → |