Question 119839 in Firebase Question posted in
An extensive official documentation can be found here.

How to get Firebase hosting emulator to serve a Vite dev server locally?

I’m building an app in Vue 3 with Vite as my bundler and dev server. I’m using Firebase as the backend. I’ve got the hosting emulator working locally, but it points to the /dist directory where the build output goes. While this works, it requires a manual rebuild each time to pick up the changes.

Instead, I’d like to be able to configure the hosting emulator to serve the Vite dev server when developing locally. So it would essentially proxy the Vite app on port 3000 to the hosting emulator URL on port 5000. This would allow hosting rewrite rules to be tested, including ones that point to cloud functions.

Tags:

2

Answers


  1. 0

    What I did was I used the vite dev server as is and pointed the firebase hosting to the dist folder. I changed my firebase.json file to:

    "hosting":{
   "public":"dist",
   "ignore":[
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
   ]
},

    and for the hosting emulator

    "hosting": {
    "port": 5000
 },

    I never found of a way to get the hosting emulator to act as a dev server. However just using my vite dev server I was able to connect to the emulators and to my production services. Vite dev server after all was a client.

    When using Cloud Functions locally it meant that I had to do add cors to my functions headers and everything just worked fine.

    Login or Signup to reply.
  2. 0

    Firebase hosting emulator has its own run environment where it not includes any tools/environment to run Vite dev mode. It just serves static files and read firebase.json file, to know are it should redirect requests set response headers etc. Emulator Probably will work only with static files, so there is only one option that you will build your project every time you want to check are it works in emulator. I usually use every emulator except Hosting when I’m working in frameworks that needs webpack or Vite.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search