Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

firebase local server > how to refresh browser when files changed

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

like image 485
sasha Avatar asked Jun 27 '17 10:06

sasha


1 Answers

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.

like image 180
Frank van Puffelen Avatar answered Oct 31 '22 15:10

Frank van Puffelen