luckyframework / lucky

A full-featured Crystal web framework that catches bugs for you, runs incredibly fast, and helps you write code that lasts.
https://luckyframework.org
MIT License
2.57k stars 156 forks source link

Using a live-reload instead of browsersync for minimal projects #1692

Closed mdwagner closed 2 years ago

mdwagner commented 2 years ago

Discussed in https://github.com/luckyframework/lucky/discussions/1635

Originally posted by **mdwagner** January 3, 2022 ### Goal For minimal-type Lucky projects, having the option to _not_ use browsersync would be great, as it could allow for a lower barrier to entry when starting a Lucky project. I have already looked into this a bit, basically creating a [POC on what a live-reload without browsersync](https://github.com/mdwagner/importmap-example-lucky/blob/master/tasks/live_reload.cr) could look like, along with limitations it would have. ### How it works Instead of starting a new Process with the browsersync executable, I start an HTTP::Server running a WebSocket server (although this could be an EventStream server alternatively). Then whenever it would need to refresh the browser, it sends a message to any WebSocket connections. These WebSocket connections would just call `location.reload()` whenever they get a message. [Here's an example of how I'm doing in a Lucky project](https://github.com/mdwagner/importmap-example-lucky/blob/master/src/components/shared/layout_head.cr#L37). ### Limitations It actually works pretty well, but I have found that if you don't fingerprint your assets, the JS files don't change. This _can_ be solved with more work than what I've done here, but for just Crystal code changes it works great. Combing this with something like [Alpine.js](https://alpinejs.dev/), where you don't typically do much JS development, it works just fine. But if you were trying using [React](https://reactjs.org/), this wouldn't work that well in development. This actually makes sense with the Goal, as that wouldn't be a minimal-type of project, so you might already be reaching for more complex tools anyway. Let me know if you would like to explore this option more. I'm also on the Discord server.