Firebase Emulator, Ngrok and imageKit not connecting

121 Views Asked by At

i'm working locally on my firebase project so i've set up the firebase emulator.

What i'm working working on has many images and videos so i want to connect it to imageKit so that i can play around with it locally. Imagekit can't access it because its on localhost:3000 so i'm using ngrok based on this documentation. Ngrok is able to connect localhost:3000 to a url that people can view. I don't know how to connect Ngrok to my firebase emulator storage configuration so that images and videos from emulator are accessible to imageKit.

These are the emulator ports.

┌────────────────┬────────────────┬─────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Authentication │ 127.0.0.1:9099 │ http://127.0.0.1:4000/auth      │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Functions      │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Firestore      │ 127.0.0.1:8080 │ http://127.0.0.1:4000/firestore │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Hosting        │ 127.0.0.1:5000 │ n/a                             │
├────────────────┼────────────────┼─────────────────────────────────┤
│ Storage        │ 127.0.0.1:9199 │ http://127.0.0.1:4000/storage   │
└────────────────┴────────────────┴─────────────────────────────────┘

I have configured ngrok ports for both localhost:3000 and localhost:9199 and i still can't seem to pull image to imageKit.

The image path for local emulator storage is like so:

http://localhost:9199/v0/b/default-bucket/o/images%2F0JvfPkLYsjFsZR0vu4jyqSb83z95%2Fbb095ddb-c556-4262-ae08-a946b5c0dc37-IMG_9715.JPG?alt=media&token=19066972-50dd-4638-9f64-91573e276777

I have changed .json file emulator storage host from localhost to:

 "storage": {
      "host": "0.0.0.0",
      "port": 9199
    },

as i know 0.0.0.0 doesn't have as many restrictions but images are still not accessible externally even though image URL is:

http://0.0.0.0:9199/v0/b/default-bucket/o/profileImage%2FFnFnO7nlW7eA87KrgAytz35X6O8I%2FprofilePhoto?alt=media&token=dc866fff-01be-45ce-a854-b2e98ccb88fe

My question is, am i going about this the right way? Is the only way for me to achieve this, to upgrade on ngrok?

Not a simple question so i'm happy to expand more.

0

There are 0 best solutions below