17

I'm running a webapp on a local firebase server (which is started with 'firebase serve').

What I want is to find a way to tell my client (browser script) that my project files have changed in order to initiate a browser refresh.

In former projects (running a nodejs server) my solution was to establish a websocket connection between backend and frontend. so each time the server was restarted (...due to file changes, that I was watching for using watchers like nodemon...), my serverside code put up a new connection to the client, which listened to that event and refreshed the browser on it.

The problem with my firebase server is, that I don't run my own backend code and that I haven't found any information on how to tell my client, that my project files have changed. In fact, my firebase server doesn't restart at all because there is no need for that yet in this backend-less environment. But I suppose at least this could be done by running my firebase server via nodemon or something.

Additional Info: I tried to find a way using webpack-dev-server, which has auto-refresh integrated, but couldn't find a link between both servers or a way to integrate them running on different ports and solving different tasks.

My questions might be: Are there any solutions implemented in the firebase server? Is there a way to trigger clientside events when files have changed? Or eventually to run my own firebase backend middleware to create websocket connection with the client?

Any suggestions are welcome.

edit:

I found a way using browsersync. Since browsersync can act as a proxy for other servers (in my case: the firebase server), it's pretty easy to setup.

After installation just go to your project directory and type e.g.:

browser-sync start --proxy "localhost:5000" --files "dist/*"

where "localhost:5000" is the host and port which your current server adresses and "dist" is the directory that should be watched for changes.

per default browsersync will serve your app at "localhost:3000".

more info on browsersync homepage

sasha
  • 779
  • 10
  • 21
  • 1
    this seems to be a good option in your edits, but there is a problem with this approach that it will only be good if your application is a static hosting site. I can here looking for a project with functions and angular application: where both are in typescript and require a build before consumption by server. now I can set functions to auto build with tsc -w, but now sure how to auto build angular application on change. – Anant Anand Gupta Oct 24 '18 at 12:30
  • 1
    @AnantAnandGupta Angular has live reloading with it. So one does not need browserSync with Angular or with an Angular project that uses Firebase. Using `ng serve` instead of `firebase serve` will reload necessary changes – Obum Oct 17 '20 at 19:59

1 Answers1

4

When you reload the web page, the Firebase CLI tools serve the latest files from the local disk.

When you modify a local file on disk, the Firebase CLI tools does not auto-reload that file in the browser. The Firebase CLI knows very little about the content it is serving, definitely too little to implement this feature at the moment.

If you'd like this feature to be added, I suggest you add it as a feature request on the firebase-tools repo.

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
  • 1
    thank you. u got me to the right direction. as you pointed out, firebase is mostly "interested" in the backend of an app. so, frontend tasks might be better solved by other software. although it would be nice, if firebase server had such a feature – sasha Jun 27 '17 at 20:14
  • 2
    Still, no news for hot reload? – PovilasID May 02 '18 at 09:17
  • I think I ended up using an own nodejs script, using a file watcher like chokidar or fs.watch. but don't know about the best way to go these days. – sasha Aug 18 '19 at 16:24