Giter Club home page Giter Club logo

firebase-tools-ui's Introduction

Firebase Emulator UI

The web UI for Firebase Emulator Suite. Features include:

  • Overview of Emulators running
  • Firebase Realtime Database Data Viewer/Editor
  • Cloud Firestore Data Viewer/Editor
  • Logs Viewer with powerful filters

More on the blog post!

Usage

If you want to use the Emulator UI in your project, just simply follow the guide for installing and running the Emulator Suite.

Make sure you have Firebase CLI >= 8.4.0. (You may want to update if you already have Firebase CLI installed.) The Emulator UI will automatically start when you start the Emulator Suite.

Contributing

We welcome any issues and Pull Requests to improve the Emulator UI. The following instructions cover how to set up your dev environment for iterating on the Emulator UI itself.

(If you're looking forward to use the Emulator UI as a user, please refer to the Usage section above.)

Setting up your development environment

Clone the repo and install any dependencies:

git clone https://github.com/firebase/firebase-tools-ui.git
cd firebase-tools-ui
npm install # must be run the first time you clone

Start the Development Server

To run the development server with test data:

firebase emulators:exec --project demo-example --import test-data 'npm start'

This will run the web app in the development mode.
Open http://localhost:5173 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

NOTE: The emulators:exec command is necessary to set the environment variables for the web app to talk to emulators.

Developing within a user project

You can also start the dev server of the Emulator UI and connect to your real project. To do so, first start the Emulator Suite in your project folder:

cd project/
firebase emulators:start --import my-data

✔  hub: emulator hub started at http://localhost:4400

This will run the emulators for your project.

In another terminal, run the Emulator Suite UI from the firebase-tools-ui folder: (note that <project-id> must be replaced with the matching project id of your project.)

cd firebase-tools-ui/
GCLOUD_PROJECT=<project-id> FIREBASE_EMULATOR_HUB=localhost:4400 npm start

Open http://localhost:5173 to view it in the browser. Note: The development server runs by default on port 5173, so please make sure you are visiting that URL instead of the production Emulator UI (which defaults on port 4000).

Developing features behind flags

Experimental CLI features that are activated/deactivated with the firebase experiments:enable command are surfaced to the UI via an environment variable. UI components can check if an experiment is active with the useExperiment hook:

function ExperimentalFeatureUI() {
  const showNewFeature = useExperiment("pineapple-smoothie");

  if (showNewFeature === true) {
    return <h1>Hi, I am an experimental feature</h1>;
  } else {
    return null;
  }
}

Other Available Scripts

In the project directory, you can run:

npm test

Launches the test runner in the interactive watch mode.

See the section about running tests for more information.

To run the test runner with emulators, use:

firebase emulators:exec --project demo-test 'npm test'

firebase emulators:exec --project demo-test --only firestore 'npm test AddCollectionDialog.test.tsx'

To disable the Jest interactive mode use the flag watchAll=false like so:

firebase emulators:exec --project demo-test --only firestore 'npm test -- --watchAll=false'

If you get port conflict errors, make sure to stop other instances of the Firebase Emulator Suite (e.g. the one you've started for the development server above) and try again.

npm run build

Builds the app for production, both server and web.

The web production build will be output to the dist/client folder.
It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes.

The server code will be packed into dist/server/server.js, which is a standalone JS file including all dependencies, ready for execution with Node.js.

To run the production build with emulators, use:

firebase emulators:exec --project demo-example --import test-data 'node dist/server/server.js'

This will start a server that serves both the static files and APIs at http://localhost:5173/.

NOTE: The static files are not meant to be deployed to a website or CDN. They must be used in conjunction with the server as described above.

License

Apache-2.0 License
Copyright 2019-2021 Google LLC. All rights reserved.

firebase-tools-ui's People

Contributors

abeisgoat avatar abradham avatar antoniordznav avatar christhompsongoogle avatar commanderroot avatar cristianberroeta avatar davideast avatar dependabot[bot] avatar gabrifila avatar gautamsingal avatar gianlucatomasino avatar huangjeff5 avatar jhuleatt avatar joehan avatar lisajian avatar maddoxmarius avatar nothingeverhappens avatar pawelborkar avatar renovate[bot] avatar sam-gc avatar tanabee avatar theirondev avatar tjlav5 avatar tonyjhuang avatar tstirrat avatar yuchenshi avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

firebase-tools-ui's Issues

Firestore UI bug

If you run the following code, the document and sub-collection document never appear in the UI. This works for the live database.

const firestore = firebase.firestore();
firestore.settings({ host: 'localhost:8080', ssl: false });

const subCol = `firestore/limitToLast/count`;
const colRef = firebase.firestore().collection(subCol);
colRef.add({ count: 1 });

[Firebase Emulator Suite]: Documents created in a sub collection (>=4 level deep) do not show in the Firestore tab

[REQUIRED] Environment info

firebase-tools:
8.4.3

Platform:
Catalina 10.15.5

[REQUIRED] Test case

Firebase Emulation Suite
Using Javascript or the Android SDK to create a new document that is in at LEAST two new collections(root collection + sub collection).
/firstCollection/document1/secondCollection/document2

[REQUIRED] Steps to reproduce

  1. Init a new Firebase project
    firebase init functions
  2. Add the following index.js
const firebase_admin = require('firebase-admin');

const admin = require("firebase-admin");
admin.initializeApp();
// create fourth level document
admin.firestore().collection("firstLevel").doc('secondLevel').collection("thirdLevel").doc("fourthLevel").set({
  hello: 'world'
});

  1. Start the Firebase Emulator Suite
    firebase emulators:start --only firestore,functions

[REQUIRED] Expected behavior

The document should show up at http://localhost:4000 in the Firestore tab

[REQUIRED] Actual behavior

Nothing shows up in the Firebase Emulation Suite Firestore tab BUT the data can be read with the Android SDK (the document has been created).

[ADDITIONAL INFO]

It works when creating documents that are at the second level. The following index.js code works (the document shows up in the Firestore tab)

const firebase_admin = require('firebase-admin');

const admin = require("firebase-admin");
admin.initializeApp();
// create second level document
admin.firestore().collection("firstLevel").doc("secondLevel").set({
  hello: 'world'
});

It also works if a second level document(in a collection) is first created, then a new document in a sub collection is added(fourth level).

Everything works in Firestore production.

List all Firestore "projects" in the emulator

The RTDB UI correctly lists the multiple databases created in the emulator. But the Firestore UI only lists the "main" one, even when connecting to different project id in the emulator.

Use-case: when we run unit tests, we use the --import to use a common dataset for each test, but each tests starts on its own "project id" (to not contaminate other tests).
Currently it's not possible to debug those tests in the emulator UI.

Firestore emulator UI does not display filtered values

When applying a field filter to selected collection, the documents' value for the field is not displayed. It would be helpful to see the values alongside the document id (as you do in the normal firestore console environment).


The filter

image

The collection display

image

Database UIs do not work with host 0.0.0.0

Platform: macOS
CLI version: 8.13.1

Here's my firebase.json:

{
  "emulators": {
    "database": {
      "host": "0.0.0.0",
      "port": 9001
    },
    "firestore": {
      "host": "0.0.0.0",
      "port": 9002
    },
    "functions": {
      "host": "0.0.0.0",
      "port": 9003
    },
    "ui": {
      "enabled": true
    }
  }
}

Here's what I see in the RTDB UI:
Screen Shot 2020-10-23 at 2 51 54 PM

In the UI I see 404s and also this error:

io-6de156f3.js:111 TypeError: Cannot read property 'hostAndPort' of undefined
    at sagas.ts:129
    at c (runtime.js:63)
    at Generator._invoke (runtime.js:293)
    at Generator.next (runtime.js:118)
    at p (redux-saga-core.esm.js:1157)
    at u (redux-saga-core.esm.js:1251)
    at k.<computed> (redux-saga-core.esm.js:731)
    at redux-saga-core.esm.js:1203
    at v (redux-saga-core.esm.js:1271)
    at p (redux-saga-core.esm.js:1161)
g @ io-6de156f3.js:111

In the Firestore UI it appears to be working but I see these errors in the Chrome dev console:
Screen Shot 2020-10-23 at 2 56 28 PM

Firestore Emulator saves time not in UTC but in the machines time zone

Environment info

firebase-tools:

8.7.0

Platform:

macOS

Test case

Tried to set the timezone of emulator using TZ=UTC as referenced here so that Firestore timestamps would be in UTC format.

Steps to reproduce

Run TZ=UTC firebase emulators:start
Open http://localhost:4000/firestore on Safari or Chrome
Add a collection and put document with the field of type timestamp

image

Expected behaviour

Time zone would be shown as UTC

Actual behavior

Firestore shows machines timezone (which is New Zealand as a shown in the screenshot)

Starting emulator doesnt start UI

I have the latest CLI tools installed (8.4.2).
My firebase.json file is

{
  "emulators": {
    "firestore": {
     "port": 8081
    },
    "ui": {
      "enabled": true
    }
  }
}

Output of the start command is as follows

i  emulators: Starting emulators: firestore
⚠  firestore: Did not find a Cloud Firestore rules file specified in a firebase.json config file.
⚠  firestore: The emulator will default to allowing all reads and writes. Learn more about this option: https://firebase.google.com/docs/emulator-suite/install_and_configure#security_rules_configuration.
i  firestore: Firestore Emulator logging to firestore-debug.log
i  ui: Emulator UI logging to ui-debug.log

┌───────────────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! View status and logs at http://localhost:4000 │
└───────────────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ localhost:8081 │ http://localhost:4000/firestore │
└───────────┴────────────────┴─────────────────────────────────┘
  Other reserved ports: 4400, 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.```

Though when I hit the localhost:4500 I get the  message 'Upgrade required'.

Not sure what I need to upgrade, any insights to get this working?

Firestore data not shown in emulator UI

[REQUIRED] Environment info

firebase-tools: 8.4.3

Platform: macOS

[REQUIRED] Test case

I am running the emulator UI locally and connecting my android device to the local emulator UI. I am using following code to connect my firestorm DB from the android device.

val settings = FirebaseFirestoreSettings.Builder()
                .setHost("10.0.2.2:8080")
                .setSslEnabled(false)
                .setPersistenceEnabled(false)
                .build()

firestoreInstance = FirebaseFirestore.getInstance()
firestoreInstance.firestoreSettings = settings

I wanted to test firestore database in my local.

[REQUIRED] Steps to reproduce

  1. Start emulator UI
  2. Setup firestore setting in android.
  3. Add some data to firestore.

[REQUIRED] Expected behavior

The data which is added from device should be visible on firestore emulator UI.
http://localhost:4000/firestore

[REQUIRED] Actual behavior

The data is successfully pushed to the local emulator and got an update on the android device. But the data is not visible firestore emulator UI.
http://localhost:4000/firestore

Workaround:
If we paste firestore URL manually on the browser then we are able to see the data.
Screenshot 2020-07-13 at 8 20 17 AM

As we can see that the document PRWJQ4Sp... is visible now. But it is not shown under users collection.

npm start typescript compile fails

Upon trying to start the development server, the compilation fails with the following message:

Failed to compile.

./src/components/Firestore/utils.ts
  Line 70:22:  Parsing error: Expression expected

This is coming from the line:

  return typeof value?.valueOf() === 'boolean';

My typescript is bad, otherwise I'd have PR'ed a fix. This change came from #44.

Cloud Functions Emulator does not emulate local functions

I have a strange situation where the emulator does not emulate the local functions.
The app is hosted locally on localhost:5000, but not the functions on localhost:5001.

Any help with this issue would be greatly appreciated.

I was able to use the emulator successfully in the past, but today
the emulator accesses the deployed function location not the localhost location.

  userApi: 'https://us-central1-app-ce059.cloudfunctions.net/api',

The network Request Url from chrome developer tools:

Request URL: https://us-central1-app-ce059.cloudfunctions.net/api/users

If I change the url to the local location in the code then the local functions are accessed.

  userApi: 'http://localhost:5001/app-ce059/us-central1/api',

This is the output

$ firebase --version
8.16.2
$ 

$ firebase emulators:start
i  emulators: Starting emulators: functions, firestore, hosting

✔  functions[api]: http function initialized (http://localhost:5001/app-ce059/us-central1/api).

│ ✔  All emulators ready! View status and logs at localhost:4000 │
└────────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬──────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI      │
├───────────┼────────────────┼──────────────────────────┤
│ Functions │ localhost:5001 │ localhost:4000/functions │
├───────────┼────────────────┼──────────────────────────┤
│ Firestore │ localhost:8080 │ localhost:4000/firestore │
├───────────┼────────────────┼──────────────────────────┤
│ Hosting   │ localhost:5000 │ n/a                      │
└───────────┴────────────────┴──────────────────────────┘
  Other reserved ports: 4400, 4500

RFC : Add Firestore Import from Cloud

Often Emulator is used before changing a schema or while running a test script.

It would be wonderful if we could add a button to say grab and export of production data (dev, stage,prod) and load up to the local emulator.

image

My thought is to have a button that opens the Storage Bucket within your project where you are

image

Then you could bring that down locally and place it into your local import folder and fire up the emulator again.

This way you have a solid copy of the data you would need to start from.

Error on the Firestore viewer when trying to decode URI containing the character '%'.

This bug was found when resolving the pull request #258, which encodes and decodes collection and document ids, in order to handle special characters.

The situation is that when an URI has the character '%', it is correctly encoded, but the React library 'history' automatically decodes only the character '%' and pushes this path to the HTML5 history element. This is a known issue of the library that can be found here.

Because of this automatic decode issue, the moment the partially encoded URI is tried to be decoded on our code, an error occurs due to malformed URI.

Emulator cannot --export-on-exit when run via npm

Environment:

  • MacOS Catalina: 10.15.6
  • shell: zsh 5.7.1
  • node: v14.4.0
  • npm: 6.14.7

I use an npm script to launch the emulators. In the scripts section of package.json I have:

"emulators": "firebase emulators:start --only firestore --import=./data --export-on-exit"

The emulators run fine when I run npm run emulators.

But when I terminate the command, things do not work as expected. Pressing ctrl+c shows that the emulators receive 2 SIGINTs:

^C
i  emulators: Received SIGINT (Ctrl-C) for the first time. Starting a clean shutdown.
i  emulators: Please wait for a clean shutdown or send the SIGINT (Ctrl-C) signal again to stop right now.
i  Automatically exporting data using --export-on-exit "./data" please wait for the export to finish...

⚠  emulators: Received SIGINT (Ctrl-C) 2 times. You have forced the Emulator Suite to exit without waiting for 2 subprocesses to finish. These processes may still be running on your machine:

 ┌────────────────────┬────────────────┬───────┐
 │ Emulator           │ Host:Port      │ PID   │
 ├────────────────────┼────────────────┼───────┤
 │ Emulator UI        │ localhost:4444 │ 87959 │
 ├────────────────────┼────────────────┼───────┤
 │ Firestore Emulator │ localhost:7777 │ 87959 │
 └────────────────────┴────────────────┴───────┘

 To force them to exit run:

 kill 87959 87959

It is the warning, about receiving Ctrl-C 2 times, that is the problem. Because of this issue, the data does not get exported on exit.

Running that same command but directly on the command line rather than via npm run emulators, and Ctrl-C shuts the emulators down cleanly and data exports as expected.

Emulator UI should not connect to 0.0.0.0 for emulators

In firebase.json, it is possible to specify 0.0.0.0 for host for each emulator. This tells an emulator to listen on all IPv4 interfaces (including 127.0.0.1, the device's public network IP, etc.).

{
  // ...
  "emulators": {
    "firestore": {"host": "0.0.0.0", "port": 8080},
  }
}

However, with this setup, the Emulator UI attempts to send requests http://0.0.0.0:8080 to reach Firestore in the Firestore viewer. This is invalid since 0.0.0.0 is a non-routable address but some browsers / platforms (such as Chrome on Linux) special cases it to mean the same as 127.0.0.1. On other browsers / platforms (such as Chrome on Windows), this fails with errors like net::ERR_ADDRESS_INVALID.

Instead, the Emulator UI should change it to 127.0.0.1 when constructing the URL. Similarly, the Emulator UI should connect to ::1 (IPv6 local) when :: (IPv6 zero) is specified.

Realtime Database emulation data view have child spacing issue

[REQUIRED] Environment info

firebase-tools: 8.16.2

Platform:

[REQUIRED] Test case

I can't make one right now.

[REQUIRED] Steps to reproduce

  1. Emulate a project which uses Realtime Database
  2. Have at least 2 items under same parent, one that have children and other that doesn't
  3. They aren't properly aligned, made me think that one was a child of the other.

[REQUIRED] Expected behavior

Proper alignment

[REQUIRED] Actual behavior

Captura de tela de 2020-11-17 16-43-33
lU seems to be a child of l because it's not properly aligned.
Opening l, looks worse.
Captura de tela de 2020-11-17 16-59-46

Happened on Firefox, Ubuntu.

How do I "Please specify these environment variables: GCLOUD_PROJECT FIREBASE_EMULATOR_HUB"?

Upon trying to run:

firebase emulators:exec --project sample --only database,firestore 'npm start'

I get:

...
i  Running script: npm start

> [email protected] start /mnt/c/Users/varunarora/Code/firebaseui/firebase-tools-ui
> react-scripts start

Please specify these environment variables: GCLOUD_PROJECT FIREBASE_EMULATOR_HUB
(Are you using firebase-tools@>=7.14.0 with `--project your-project`?)

I just installed firebase-tools, so got version 7.15.0. Do I need to install a lower version?

I tried to export the env vars to values EMULATOR_HUB_ENV="FIREBASE_EMULATOR_HUB" and GCLOUD_PROJECT="sample" to no avail (unless there is a fancier node way to set these variables so they are picked up by react-scripts start).

FR: Allow cloning from a filtered data set in RTDB

Cloning currently works for an entire data set, which is a problem for long lists of data because it attempts to read all the data at the location and render it into the clone modal. This freezes for quite awhile with large data sets.

It would be useful to allow cloning with a filtered dataset for easy database restructures. We should also consider only rendering a truncated list to the modal.

image

image

Way to launch from within a package's dependencies?

This UI is just so incredibly helpful to my workflow—can't thank you enough for putting it together.

One thing I'm curious about is whether there's an easier/more convenient way to launch the UI from within existing firebase projects (e.g. one that doesn't require me to open a new terminal tab, and copy/paste/remember the snippet to launch).

For instance, here's what I personally picture the ideal setup looking like:

Some existing project folder, containing a package.json with:

{
  "scripts": {
    "start": "app-cli-service start",
    "poststart": "firebase-tools-ui start"
  },
  "devDependencies": {
    "firebase-tools-ui": "^0.0.0"
  }
}

where the firebase-tools-ui start script essentially runs the equivalent of:

cd node_modules/firebase-tools-ui/
GCLOUD_PROJECT=<project-id> FIREBASE_EMULATOR_HUB=localhost:4400 npm start

This way, I can just add this repo as an npm package, and amend my scripts to launch the UI automatically (ideally without even having to configure the project-id).

I am totally willing to try and tackle this with a PR, but I just wanted to check that I'm not missing something (like maybe this is possible already somehow), or that this isn't fundamentally impossible for some reason or another.

Thoughts?

Firestore sub-collections with nonexistent parents are not showing in emulator

[REQUIRED] Environment info

firebase-tools:
8.4.0

Platform:
macOS 10.15.4

[REQUIRED] Test case

I've found that when having nested collections in Firestore, they don't display on the web interface of the emulator unless parent documents contain data.

[REQUIRED] Steps to reproduce

// create some data in a nested collection without data in the document

db.collection('stripe')
.doc('6tSfMgrOCEOi3kj0IHRivd0ZCgX2')
.collection('subscriptions')
.doc('sub_123456789').set({
    status: "active"
})

[REQUIRED] Expected behavior

On the production version of the data viewer, it displays empty documents in italics (to designate that there is no fields but sub-collections exist). Image below.
Screen Shot 2020-05-24 at 8 02 36 PM

[REQUIRED] Actual behavior

There is nothing to display on the UI and I cannot access child collections. If I set some dummy data on a document, the row will appear.

Log view UI in emulator crashes when rendering an object containing an empty array

[REQUIRED] Environment info

firebase-tools: 8.13.1

Platform: macOs

[REQUIRED] Test case

https://github.com/BernieSumption/firebase-emulator-bug-report

[REQUIRED] Steps to reproduce

If you log an object containing an empty array and then view the log line in the emulator log view, the view crashes. For example this line:

functions.logger.info("Importing property", {empty: []});

See https://github.com/BernieSumption/firebase-emulator-bug-report/blob/master/README.md for step by step instructions to run the sample project.

[REQUIRED] Expected behavior

The log UI should be able to display any valid JSON payload.

[REQUIRED] Actual behavior

Log UI crashes - whole UI vanishes and screen becomes empty.

npm ERR! missing script: build (windows)

Running command: npm --prefix "$RESOURCE_DIR" run build
npm ERR! missing script: build

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\rensi\AppData\Roaming\npm-cache_logs\2020-11-15T20_35_10_937Z-debug.log
events.js:292
throw er; // Unhandled 'error' event

I have this version:

Firebase auth emulator data export not working

When I add a new user in the newly released firebase auth emulator, and then shut down the emulator, started with command:

firebase emulators:start --export-on-exit --import em-data

the users are not retained when I restart the emulators, while firestore and RTDB are.

Using Emulator UI remotely on a different device

Viewing the firestore UI is always empty. My tests are passing and successfully using firestore. Creating a collection with a document in the UI returns to a empty database UI. Navigating to the collection via the URL returns an empty collection.

IMG_0100
IMG_0101

I'm on version 8.7.0 of firebase cli. Starting the emulators with firestore emulators:start.

Config:

    "firestore": {
        "rules": "firestore.rules"
    },
    "emulators": {
        "hosting": {
            "port": 5000
        },
        "firestore": {
            "port": "8080"
        },
        "ui": {
            "enabled": true,
            "host": "0.0.0.0",
            "port": 4000
        }
    }

WebSocket connection to 'ws://localhost:4500/' failed

I've configured a local development workspace (based on the VS Code devcontainer feature) where the Firebase Emulators are running inside a container and the code (the dev environment) runs in another. My main container, running the developed apps, can communicate with the emulators, the host machine can access the emulator UI by http://localhost:4000/ so, everything works perfectly with one exception: The logs tab in the Emulators UI shows this error in the console and no logs from the functions emulator:

"WebSocket connection to 'ws://localhost:4500/' failed: Connection closed before receiving a handshake response"

As you can see in the files below all the ports are mapped and exposed, including 4500. I think the problem can be related with some part of the emulator running on 'localhost' instead of '0.0.0.0'. I had similar problems with the emulators not being accessible outside the container and I fixed those by setting "host": "0.0.0.0" in firebase.json for each emulator.
For the problem described above, I can't find any way to set the host to '0.0.0.0'.

The problem is a bit hard to replicate but I have attached the content of my .devcontainer folder that can be used with Remote-Containers VS Code extension. If it throws some errors about missing files or folders just create them empty or remove the corresponding Docker volumes from docker-compose.

.devcontainer.zip

Windows can't open the development server

This is likely a react app starting issue. I am using WSL / Ubuntu 16.04.

Upon running:

firebase emulators:exec --project sample --only database,firestore --import test-data 'npm start'

I get a window that says:

image

This isn't a major inconvenience, since I can just open the URL in the browser directly.

Can't display field filter anymore

[REQUIRED] Environment info

firebase-tools:
8.13.1

Platform:
Linux on Docker (WSL 2)

[REQUIRED] Test case

I'm trying to accomplish something that has been possible in both the cloud version and the emulator version of Firestore: show filtered parameter on each document of a collection:

Works fine on the cloud version:
firestore-online

Stopped working on local version:
firestore-local

[REQUIRED] Steps to reproduce

Run the emmulator, create a collection and a couple documents, try fo filter by any parameter

[REQUIRED] Expected behavior

Should have the same behavior as the cloud version, and show the filtered parameter

[REQUIRED] Actual behavior

Doesn't

Auth Emulator UI crashes when there is no Provider Info

I created a user like this:

  const user = await admin.auth().createUser({
    uid: "uid" + new Date().getTime(),
    displayName: "Sam User"
  });

And then when I load the emulator UI it complains about map of undefined

I think it's this bit:

      <div className={styles.iconWrapper}>
        {user.providerUserInfo.map(
          providerInfo =>
            providerToIconMap[providerInfo.providerId] && (
              <Icon
                icon={providerToIconMap[providerInfo.providerId]}
                key={providerInfo.providerId}
                aria-label={providerInfo.providerId}
              />
            )
        )}

Firestore UI limited to string values?

Is the Firestore UI here only limited to adding string values inside collections? I can't seem to pick from the the various datatypes on the production tool. I am guessing adding those is planned for later down the line?

(Last issue for now, I promise)

Can't add reference value to existing array field on Firestore Emulator UI

[REQUIRED] Environment info

firebase-tools:

8.7.0

Platform:

macOS

[REQUIRED] Test case

Tried to add reference value to existing array field on Firestore Emulator UI, but nothing happened.

[REQUIRED] Steps to reproduce

  1. Run firebase emulators:start
  2. Open http://localhost:4000/firestore on Safari or Chrome
  3. Add a collections and a document with array field
  4. Try to add a reference value to the exiting array field

image

image

[REQUIRED] Expected behavior

New reference value is added exiting array field.

As a side note, adding an array field with as a reference value was succeeded without any problems, but adding reference value to existing array field was failed.

Screen Shot 2020-08-06 at 16 30 25

Screen Shot 2020-08-06 at 16 30 30

[REQUIRED] Actual behavior

Nothing happened.

But, on the console of DevTools, this error log was printed.

FirebaseError: Function isEqual() requires its first argument to be a DocumentReference, but it was: a custom e object

image

Emulator UI does not show up on Windows w/ WSL2 (current 332 workarounds do not work)

Browser: Google Chrome (Also tested firefox/edge)
Browser version: Version 86.0.4240.75 (Official Build) (64-bit)
Operating system: Windows 10 Pro Version 2004
Running WSL2 with Ubuntu 20.04
uname -r : 4.19.128-microsoft-standard
Operating system version:

What steps will reproduce the problem:
Following along with the Google Codelab for Emulators
https://developers.google.com/codelabs/firebase-emulator-get-started#2

  1. I follow the through step 3 (no issues yet)
  2. On step 4 I run firebase emulators: start

What is the expected result?
I should be able to login web UI via localhost:4000

What happens instead of that?
The emulators seems to start ok

tom-linux@DESKTOP:~/emulators-codelab/codelab-initial-state$ firebase emulators:start
i  emulators: Starting emulators: functions, firestore, hosting
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: auth, database, pubsub
⚠  Your requested "node" version "8" doesn't match your global version "12"
i  firestore: Firestore Emulator logging to firestore-debug.log
i  hosting: Serving hosting files from: public
✔  hosting: Local server: http://localhost:5000
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/home/tom-linux/emulators-codelab/codelab-initial-state/functions" for Cloud Functions...
✔  functions[calculateCart]: firestore function initialized.

┌───────────────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! View status and logs at http://localhost:4000 │
└───────────────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Functions │ localhost:5001 │ http://localhost:4000/functions │
├───────────┼────────────────┼─────────────────────────────────┤
│ Firestore │ localhost:8080 │ http://localhost:4000/firestore │
├───────────┼────────────────┼─────────────────────────────────┤
│ Hosting   │ localhost:5000 │ n/a                             │
└───────────┴────────────────┴─────────────────────────────────┘
  Other reserved ports: 4400, 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

However I can't access the UI via any web browser
I get Error: ERR_CONNECTION_RESET

At first this seems very similar to:
#332

However users in that thread were able to
1.) Access the UI using the linux host IP address in place of local host
2.) Had a successful work-around using: microsoft/WSL#5706 (comment)
That leads to running a custom script here: #4150 (comment)
After adding additional ports: 22,80,443,8080,10000,3000,4000,5000,5001,8081,8082,4200,3128,4400,4500

However both of the above workarounds do not work with my setup.

Additional Debug Logs
firebase-debug.log
firestore-debug.log
ui-debug.log

Nested collection with parent document having no fields are not visible in firestore local emulator

[REQUIRED] Environment info

firebase-tools: : 8.4.3

Platform: : macOS

[REQUIRED] Test case

Should show documents with nested collections greyed out similar to production firestore

[REQUIRED] Steps to reproduce

  1. Create a nested collection for a document where no fields exist through code
await admin.firestore().doc('players/123/addresses/456').set({street:'street'});

[REQUIRED] Expected behavior

Document with 123 id should be visible (grey color) even if fields doesn't exist

[REQUIRED] Actual behavior

Document with 123 id, is not shown in the emulator leading to difference between production and emulator. Also its pretty tough to debug this scenario!

logs web viewer crashes while logging large objects

problem
Sometimes when I accidentally log bigger objects somewhere in the code of a cloud function (or it has unsafe circular dependencies or something...) - e.g. like here with logger.info({ req, resp }, test); it causes that the log viewer of firebase emulator (http://localhost:4000/logs) ends in a broken state with a blank screen with this message in the browser's console:

react-dom.production.min.js:209 TypeError: Cannot read property 'mode' of undefined
    at HighlightedJSON.tsx:131
    at Array.map (<anonymous>)
    at Hr (HighlightedJSON.tsx:95)
    at Qo (react-dom.production.min.js:153)
    at ms (react-dom.production.min.js:261)
    at cu (react-dom.production.min.js:246)
    at su (react-dom.production.min.js:246)
    at Zs (react-dom.production.min.js:239)
    at react-dom.production.min.js:123
    at e.unstable_runWithPriority (scheduler.production.min.js:19)

possible solution
I would appreciate seeing something more informative - the last thing that it tried to log to the UI (that caused the crash so I can remove it) or just fix of UI because this message is displayed correctly in the terminal (it just has like 50+ rows so it is completely unreadable :-) ) and I also see following logger.info() messages under it...

might help - https://www.npmjs.com/package/safe-json-stringify ?

api.tsx:51 Uncaught (in promise) Error: .set() on an existing document would delete other fields

Hi

Trying to add new data after deleting. This is more of an FYI & feedback.
-- This is from the Chrome console.

api.tsx:51 Uncaught (in promise) Error: .set() on an existing document would delete other fields
    at api.tsx:51
    at c (runtime.js:63)
    at Generator._invoke (runtime.js:293)
    at Generator.next (runtime.js:118)
    at r (asyncToGenerator.js:3)
    at s (asyncToGenerator.js:25)

Restarting the server did not help.

Brad.

firebase-debug.log
firestore-debug.log
ui-debug.log
database-debug.log

Problem importing JSON realtimedatabase

Previously this has worked fine but most recently when trying to import a JSON export of my realtime database from firebase into the firebase emulator I get an import error.

Looks like it is some sort of permission error but I do not know why as previously this worked fine for me?

Screenshot 2020-11-09 at 15 44 45

Screenshot 2020-11-09 at 16 02 53

firestore emulator on wsl2 does not work, results in ERR_CONNECTION_REFUSED

The main discussion is here: firebase/firebase-tools#2334

REQUIRED] Environment info
firebase-tools:8.6.0

Platform: wsl2 with Ubuntu-18.04

[REQUIRED] Test case
Start emulator firebase emulators:start --only firestore
Navigate to http://127.0.0.1:4000/firestore
Try to write in the database or simply check console

[NOT WORKING SOLUTION]

FYI, the fix for 0.0.0.0 went out with Firebase CLI v8.6.0. Please try that if you see issues with WSL with localhost / 127.0.0.1.

The above solution does not work

Summary:
Firebase emulator is running on wsl2 and we want to open firebase-tools-ui on the host machine.The page is loaded and everything works except the connection to the firestore backend. I use the following configuration:
"emulators": {
"firestore": {
"host": "0.0.0.0", // or host: 'localhost' or host: '127.0.0.1'
"port": "8080"
},
"ui": {
"enabled": true,
"port": 4000
}
}

Workaround:
Change host value to wsl2 ip address.

Screenshots:
firebase2
firebase

Firebase Emulator is not displayed in the browser - Ubuntu 18

After running this command: firebase emulators:start

i emulators: Starting emulators: functions, firestore
✔ hub: emulator hub started at http://localhost:4400
⚠ Your requested "node" version "10" doesn't match your global version "12"
✔ functions: functions emulator started at http://localhost:5001
⚠ firestore: Did not find a Cloud Firestore rules file specified in a firebase.json config file.
⚠ firestore: The emulator will default to allowing all reads and writes. Learn more about this option: https://firebase.google.com/docs/emulator-suite/install_and_configure#security_rules_configuration.
i firestore: firestore emulator logging to firestore-debug.log
✔ firestore: firestore emulator started at http://localhost:8080
i firestore: For testing set FIRESTORE_EMULATOR_HOST=localhost:8080
i functions: Watching "/home/lbazan/Documents/sourcecode/--/--/functions" for Cloud Functions...
✔ functions[addJob]: http function initialized (http://localhost:5001/----/---/addJob).
✔ emulators: All emulators started, it is now safe to connect.

I'm going to my browser and just I'm able to see this one: "OK".
image

image

I have this configuration:
firebase.json

{
"functions": {
"predeploy": [
"npm --prefix "$RESOURCE_DIR" run lint",
"npm --prefix "$RESOURCE_DIR" run build"
],
"source": "functions"
},
"emulators": {
"functions": {
"port": 5001
},
"firestore": {
"port": 8080
}
}
}

package.json

{
"name": "functions",
"scripts": {
"lint": "tslint --project tsconfig.json",
"build": "tsc",
"serve": "npm run build && firebase emulators:start --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "10"
},
"main": "lib/index.js",
"dependencies": {
"@types/cors": "^2.8.6",
"cors": "^2.8.5",
"firebase-admin": "^8.9.0",
"firebase-functions": "^3.3.0",
"webpack": "^4.43.0"
},
"devDependencies": {
"@firebase/testing": "^0.20.11",
"firebase-functions-test": "^0.1.6",
"ts-loader": "^8.0.1",
"tslint": "^5.12.0",
"typescript": "^3.2.2",
"webpack-cli": "^3.3.12",
"webpack-node-externals": "^2.5.0"
},
"private": true
}

any idea what could be the issue?

Nested object visualization problems (maps, array)

Hi, I know that is not a best practice to have document with nested object such maps in arrays in maps etc .... but I actually have a nested object in my data structure and with firebase console and emulator gui there is a bug in the visualization.

firebase console
Screenshot 2020-05-19 at 23 49 36

firebase emulator
Screenshot 2020-05-20 at 00 00 34

Because it render well until the 3rd - nest, is it intentional to avoid "really" nested object, or not?

Custom claims missing in local Firebase function

I create a user in the local auth emulator and later set custom claims for her later at some stage.

The claims are set correctly and are also visible in the Firebase emulator when you edit the user.

However, when I try to execute local Firebase function and get the claims from the context.auth.token, custom claims are not present for some reason.

Is this a bug or am I doing something wrong?

Function that sets custom claims

exports.processSignUp = functions.auth.user().onCreate(async user => {
  // ...
  try {
    await firebase.auth().setCustomUserClaims(user.uid, customClaims);
  } catch (err) {
    console.log(err);
  }
  // ...
});

Function that tries to access the claims

export const testFunc = functions.https.onCall((data, context) => {
  // custom claims are not present in the token
  console.log(context.auth.token);
  return { ok: false }
});

Firestore collections nested under empty documents are not visible

Issue: The emulator suite fails to display data nested under an empty document.

Example data structure:

visibleCollection > {docId} > DATA
invisibleCollection > emptyDoc > invisibleSubCollection > DATA
visibleNestingCollection > nonEmptyDoc > visibleNestedSubCollection > DATA

The first and last will show up in both the Firebase Console and the Firebase Emulator Suite.
The middle one shows up on the Firebase Console but not in the Emulator Suite

MCVE repo for your convenience: https://github.com/Methodician/firestore-emulator-bug-mcve

Back story:
I had been using what may be an unusual way of organizing my data given the constraints of the collection/document/collection/document structure of Firestore. It has been working nicely for me, until I decided to give the new emulator suite a test run (amazing tools at last! No more crappy local testing experience! YAY FIREBASE TEAM!)
I thought something was wrong with my implementation at first but then I saw that the emulators were working. I spent hours trying to suss out what I was doing "wrong" but it turns out I was just doing something "different" so I spent hours figuring out exactly what that was and then creating a simple demonstration repo. I hope it helps, and please fix!

Firestore document fields, subcollections and map keys are not in lexicographical order

I haven't found any issue template, please tell me if I need to edit this.

Problem

I've noticed that in the local firestore UI the fields of a document, its subcollections and the fields of a map inside the document are not lexicographically ordered.
actual

To reproduce

  1. Startup the firestore emulator.
  2. Create a new collection temp
  3. Create a new doc temp
  4. Add fields and fields in non-lexicographical order, e.g Z: "Z", F: "F", A: "A",G: "G".
  5. They are ordered by the added time, not lexicographically

Expected behavior

In the Firestore web UI the lexicographical order is followed.
expected

Motivation

I believe it should be that way to give consistency between the two environments, to help also the developer when confronting the 2 DBs.

Fix

It should not be difficult to fix by adding a sort method when mapping the keys to the great components. I would be very happy to do it.

Thank you

SassError: Can't find stylesheet to import "@material/theme/mixins";

Failed to compile
./src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/index.scss)
SassError: Can't find stylesheet to import.

24 │ @.use "@material/theme/mixins";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

node_modules@material\card_variables.scss 24:1 @.forward
node_modules@material\card_index.scss 1:1 @.use
src\components\common_material-overrides.scss 18:1 @.import
C:\Users$USER$\firebase-tools-ui\src\index.scss 24:9 root stylesheet

npm start failed due Compilation error

Firebase Emulator Suite Logs crashing

[REQUIRED] Environment info

firebase-tools: 8.10.0

Platform: macOS

[REQUIRED] Test case

n/a

[REQUIRED] Steps to reproduce

Open Logs tab in Firebase Emulator Suite.

Note: this only started to happen after I started using Firebase logger in Firebase functions.

[REQUIRED] Expected behavior

not crashing

[REQUIRED] Actual behavior

crashing with error:

react-dom.production.min.js:209 TypeError: Cannot read property 'mode' of undefined
    at HighlightedJSON.tsx:174
    at Array.map (<anonymous>)
    at Hr (HighlightedJSON.tsx:95)
    at Qo (react-dom.production.min.js:153)
    at ms (react-dom.production.min.js:261)
    at cu (react-dom.production.min.js:246)
    at su (react-dom.production.min.js:246)
    at Zs (react-dom.production.min.js:239)
    at react-dom.production.min.js:123
    at e.unstable_runWithPriority (scheduler.production.min.js:19)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.