CODEWITHSUNDEEP
javascriptvue.jsgoogle-cloud-firestorevuejs3firebase-tools
akemedis
akemedis

Reputation: 474

Cannot get firestore emulator to work with Vue

When I connect to localhost:8080, I get a html "ok" printed on the screen. Thats it.

Also when I access the emulator UI, my Firestore database is empty, and any data I try to add does not save when I click save - literally nothing happens.

The docs are confusing with regards to setting this up on Vue for a beginner.

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// import * as Firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';
import 'firebase/functions';
import 'firebase/storage';
import { getFirestore, connectFirestoreEmulator } from "firebase/firestore";

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";

const firebaseConfig = {
 **firebase config stuff**
};

// Initialize Firebase
initializeApp(firebaseConfig);
const app = initializeApp(firebaseConfig);

// init services
const db = getFirestore(app)
connectFirestoreEmulator(db, 'localhost', 8080);
createApp(App).use(router).mount('#app')

Thanks so much for any help!

Upvotes: 0

Views: 354

Answers (1)

Divyani Yadav
Divyani Yadav

Reputation: 1142

In regards to behaviour noted by you, here are my answer to each-

a) When you connect to localhost:8080, you get an html "ok" printed on the screen. This typically happens on hitting the browser or via curl command as well. This is ok.

b) Also when you access the emulator UI, my Firestore database is empty. It sounds like you are expecting some pre-loaded data after starting the Firestore emulator or expecting the data to be preserved in the emulator permanently. The Cloud Firestore emulator clears database contents when shut down as documented here. Unless the user defines export / import configuration on the emulator, any data stored in the Firestore emulator would not survive between shut down / start-up operations of the emulator. Moreover, the code snippet shown by you in the message does not show any attempts to load Firestore database. So you can refer to the documentation for understanding on this aspect.

c) Any data you try to add does not save when you click save - literally nothing happens. In my local installation of Firestore emulator, it worked as designed. I was able to add new collections and documents on Firestore through the emulator UI.

In addition, there are some great Firestore emulator video tutorials that can be referred for a detailed understanding around this topic - 1 & 2. The stack overflow answer also details the process to set up the Firestore emulator with Vue JS very well.

Upvotes: 1

Related Questions