Replace browser-sync with new dev server

[zachleat]

As our fearless browser-sync dependency may not be maintained any longer, we may want to investigate possible replacements—as I’d rather not implement this functionality in Eleventy myself though that is a possible option.

via #1164 (comment)

If you’ve heard of a good alternative, please list it here!

• https://github.com/svrxjs/svrx is pretty recent
• https://www.npmjs.com/package/live-server but actually this one may be even more outdated (2 years ago) 😅
• LiveReload
  • https://github.com/mklabs/tiny-lr
  • https://www.npmjs.com/package/livereload-js
  • https://www.npmjs.com/package/livereload
• https://www.npmjs.com/package/reload

[cristianl]

I'd like to collaborate on this. I've wanted a lightweight alternative (famous last words) to browser-sync and livereload, but it seems pointless to cobble together something that doesn't integrate well with future projects and other tools. Eleventy would be an amazing stress test/launchpad for this 🤗

Ghost mode is the main selling point of browser-sync, but it seems to account for most of the dependencies, and also adds jank on some pages/devices.

---

I've seen a simpler but effective implementation (sapper I think?) using Server Sent Events instead of websockets.

DOM injection is really great for designing in the browser despite some edge cases. It makes for cool demo gifs too.

[cristianl]

In the meantime, would a fork of the browsersync server package with dep bumps be acceptable?

Only yargs@15 needs a change to code (version() no longer accepts a function as its argument).

Tests: 466 passing / 18 pending (on current node 10, 12 and 14), same as before bumps

[brycewray]

Thanks for the heads-up, @zachleat — have replaced browser-sync with svrx for my local testing builds, and am liking it quite a bit better already.

[cj81499]

One of my favorite browser-sync features is cross-browser synchronization (scroll/click in one window, and other windows opened to the same page will do the same).

I hope that if browser-sync is replaced, we can keep that functionality. It makes cross-browser testing (chrome/firefox/safari/etc) much easier.

[brycewray]

One of my favorite browser-sync features is cross-browser synchronization (scroll/click in one window, and other windows opened to the same page will do the same).

I hope that if browser-sync is replaced, we can keep that functionality. It makes cross-browser testing (chrome/firefox/safari/etc) much easier.

That's the "ghost mode." I guess it's an to-each-his-own kind of thing. I found it creepy until I learned it was supposed to do that. 😄

[sjml]

With browser-sync updating, are you still interested in replacing it? Given #841 and #843 being listed as part of the 1.0 release, is there anything else it's doing that you would prefer to keep? (Something like svrx seems to have more flexibility, for instance, while still being actively developed).

I definitely recognize the value in not breaking what is no longer broken, though...

[rdmurphy]

👋 I was equally frustrated with browser-sync for similar reasons (but eternally grateful for all its years of service 🙏 ) and ended up creating mini-sync. It uses server-sent events instead of WebSockets to simplify messaging.

It's biggest flaw is it lacks the auto-injection into HTML files that browser-sync has. I can work around that in my uses because they often have a JS build step as well 😅 , but if anyone has any suggestions regarding that or whether it'd work for eleventy, let me know!

[brycewray]

Re the svrx pacakge, note the following for now: svrxjs/svrx#191

[TigersWay]

My little 2 cents....
I have been using a few times a potential alternative - the only "ALIVE" one I found so far - which may be worth some investigation: Modern Web Dev Server or https://www.npmjs.com/package/@web/dev-server .

[nitin2953]

Five Server https://github.com/yandeu/five-server
But some great features only work in vscode extension

[brycewray]

Looks like @zachleat has got this:

https://www.youtube.com/watch?v=wWs38M38vr8

[zachleat]

Yeah, thanks @brycewray!

Look for this at https://github.com/11ty/eleventy-dev-server soon

[zachleat]

This is ready for testing on 2.0.0-canary.1!

https://twitter.com/eleven_ty/status/1501586773834612747