Hot reloading of local webserver

[valorloff]

Hi! can we expect in the future hot reloaded dev server? and nodemonable functions local emulator? Thanks

[laurenzlong]

The functions emulator (through firebase serve --only functions and firebase experimental:functions:shell) already does hot reloading.

The hosting emulator also does hot reloading.

[mbleigh]

The Hosting emulator does not do hot reloading, and it's not in our near-term roadmap due to the additional dependencies it requires. We would like to make it easy to connect the Hosting emulator to live reload setups, though.

[laurenzlong]

Thanks for the correction!

[imjared]

Chiming in to express my support, subscribe to the issue, and clarify my "👍" . I definitely don't mind doing the dirty work and connecting to a hot reload setup but would love to have this option available as local dev of functions right now is a bit less than ideal.

As always, thanks for some rad work overall that makes my life sooo much easier.

[imjared]

Seems like this works now? https://firebase.google.com/docs/functions/local-emulator

For both tools, code changes you make during an active session are automatically reloaded by the emulator. If your code needs to be transpiled (TypeScript, React) make sure to do so before running the emulator.

[laurenzlong]

Hot loading is supported in functions emulator, but not hosting emulator at the moment.

[MM3y3r]

Yes please. I would love to see this.

[Dinduks]

Hi. Any news about this?

[jiangell]

I've spent the last couple of hours looking into this. Why isn't there simply a proxy option for when serving locally?

Most developers would keep their frontend src's out side of their firebase deployment folder, why not just allow us to locally use the served spas in the emulator?

[samtstern]

@jiangell that is already possible today. I normally have two terminals running:

1. Running my frontend build script with the --watch flag (or whatever your tool supports) which builds my site to ./dist every time I save.
2. Running the Firebase Hosting local server (firebase serve) pointing at ./dist

[jiangell]

@samtstern but that isn't HMR. I have already gotten my vue app to build --watch pointing into the emulator's public directory, but I still have to manually update the browser.

When vue serve is run, I believe it doesn't actually write files to disk, and it serves the app through an https server. What I would like to do is have the firebase hosting emulator be able to simply pull from the vue serve webserver, and thus have vue handle all the in browser HMR.

[dinvlad]

Have there been any updates on this?

[dinvlad]

As a workaround, this works great using Webpack DevServer: https://github.com/firebase/firebase-tools/issues/1676#issuecomment-698042925

[vdegenne]

browsersync to the rescue

[Dzivo]

How long will we have to do complicated stuff until we get development support we deserve might i remind you that we are paying for your services. Emulator and local development support as well as debuging and other things i nonexistant and then we wait for 6 years for simple features like this. It makes me puke when i have to work with GCP and Firebase

[MichelFloyd]

This package.json configuration works:

"scripts": {
    "build": "tsc",
    "build:watch": "tsc --watch",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log",
    "start": "concurrently \"npm run build:watch\" \"firebase emulators:start --only functions\"",
 },

With the above npm start hot reloads.