CODEWITHSUNDEEP
reactjsfirebasefirebase-tools
arkhamDev
arkhamDev

Reputation: 1048

How to use firebase emulators in a react web app

How can i use firebase emulators locally for:

I'm able to run the emulators locally on port 4000 however i'm unable to get my react app running locally to use it.

  1. Cloud functions
  2. Authentication
  3. Firestore

I have a file called firebase.js that contains the following:

import firebase from "firebase/app";
import "firebase/auth";

let config = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DB_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

export default app;

Inside my other files i call firebase like so for example for authenticating:

  //Login
  const login = async (email, password) => {
    return await app.auth().signInWithEmailAndPassword(email, password);
  };

Upvotes: 1

Views: 2590

Answers (1)

arkhamDev
arkhamDev

Reputation: 1048

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/functions";
import "firebase/firestore";

let config = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DB_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGE_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_APP_ID,
  measurementId: process.env.REACT_APP_FIREBASE_MEASUREMENT_ID,
};

const app = firebase.initializeApp(config);

if (window.location.hostname === "localhost") {
  app.functions().useFunctionsEmulator("http://localhost:5001");
  app.auth().useEmulator("http://localhost:9099");
  app.firestore().settings({
    host: "localhost:8080",
    ssl: false,
  });
}

export default app;

Upvotes: 5

Related Questions