How do I use Firebase.dart with Firebase Emulators FireStore db in a Flutter Web app?

Viewed 1125

My app is a Flutter Web app. It uses package:firebase/firebase.dart.

I am trying to use the Firebase Emulators UI.

The app is hosted on Firebase and reads and writes to Firestore. But when I use firebase emulators:start the locally hosted app at localhost:5000 is still accessing the production Firestore db.

How do I set this up so that the app running locally uses the Firestore emulator at localhost:8080?

I have found threads like this, but I'm not using cloud_firestore.dart. I've tried similar steps (see UPDATE below), but they don't work in my context.

This is my main.dart file:

import 'package:algolia/algolia.dart';
import 'package:firebase/firebase.dart' as fb;
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:web_flutter/data/repository.dart';
import 'package:web_flutter/pages/auth/login.dart';
import 'package:web_flutter/pages/home/home_page.dart';
import 'package:web_flutter/services/authentication.dart';

Future<void> main() async {
  try {
    var app = fb.initializeApp(
        apiKey: 'someAPIkey',
        authDomain: 'some.domain.com',
        databaseURL: 'https://somedomain.firebaseio.com',
        projectId: 'myProj',
        storageBucket: '',
        messagingSenderId: 'someId',
        appId: '1:9anAppId');

    var searchClient = Algolia.init(
        applicationId: 'anAppId',
        apiKey: 'someAPIkey');

    runApp(MyApp(
        repository: Repository(app.firestore(), searchClient),
        authentication: Authentication(app.auth())));
  } on fb.FirebaseJsNotLoadedException catch (e) {
    print(e);
  }
}

class MyApp extends StatefulWidget {
  final Repository repository;
  final Authentication authentication;

  const MyApp({Key key, this.authentication, this.repository})
      : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

Any thoughts?

Thank you!

UPDATE: I tried the following but am getting the same results:

import 'package:algolia/algolia.dart';
import 'package:firebase/firebase.dart' as fb;
import 'package:firebase/src/firestore.dart' as fs;
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:web_flutter/data/repository.dart';
import 'package:web_flutter/pages/auth/login.dart';
import 'package:web_flutter/pages/home/home_page.dart';
import 'package:web_flutter/services/authentication.dart';

Future<void> main() async {
  try {
    var app = fb.initializeApp(
        apiKey: 'someAPIkey',
        authDomain: 'some.domain.com',
        databaseURL: 'https://somedomain.firebaseio.com',
        projectId: 'myProj',
        storageBucket: '',
        messagingSenderId: 'someId',
        appId: '1:9anAppId');

    var searchClient = Algolia.init(
        applicationId: 'anAppId',
        apiKey: 'someAPIkey');

    // These two lines are new:
    var db = app.firestore();
    db.settings(fs.Settings(host: 'localhost:8080', ssl: false));

    runApp(MyApp(
        repository: Repository(db, searchClient),
        authentication: Authentication(app.auth())));
  } on fb.FirebaseJsNotLoadedException catch (e) {
    print(e);
  }
}
1 Answers

The key was to import dart:html giving me access to window. From there I was able to do something similar to the JavaScript used in the Firebase docs.

import 'dart:html';
import 'package:algolia/algolia.dart';
import 'package:firebase/firebase.dart' as fb;
import 'package:firebase/firestore.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:web_flutter/data/repository.dart';
import 'package:web_flutter/pages/auth/login.dart';
import 'package:web_flutter/pages/home/home_page.dart';
import 'package:web_flutter/services/authentication.dart';

Future<void> main() async {
  try {
    var app = fb.initializeApp(firebaseConfig);

    if (window.location.hostname == 'localhost') {
      app.firestore().settings(Settings(
            host: '0.0.0.0:8080',
            ssl: false,
          ));
    }

I don't know if the host will be 0.0.0.0 for everyone in all situations. I got this from the host listed when the emulators are started.

Related