Jskalc
Phoenix LiveView hot reload has an option to preserve socket state
Sorry if it’s a common knowledge, but it’s something I just learned and wanted to share.
I’ve seen that mind-blowing demo of hot-reload in production recently presented by Chris. So I asked if we could have something like that in development as well: Jakub Skałecki 🚀 #buildinpublic on X: "Hey @chris_mccord could we have this in development? 🧐 Right now state is not preserved across hot reloads" / X
It turns out, it’s there already! In your dev.exs Endpoint config add live_reload: notify section and update live_reload: patterns to match this:
# Watch static and templates for browser reloading.
config :my_app, MyAppWeb.Endpoint,
live_reload: [
notify: [
live_view: [
~r"lib/my_app_web/core_components.ex$",
~r"lib/my_app_web/(live|components)/.*(ex|heex)$"
]
],
patterns: [
~r"priv/static/(?!uploads/).*(js|css|png|jpeg|jpg|gif|svg)$",
~r"lib/my_app_web/controllers/.*(ex|heex)$"
]
]
Now when you update your live view code, your state will stay intact.
For me it’s a life-changer. I have to admit I wasted so much time without that feature 
Mostly when working with a bit more complex Live Views with forms or ephemeral state.
Did you know about it? Is it highlighted somewhere in the documentation / installation instructions but I just somehow missed it? 
Most Liked
chrismccord
This has been there for months (years?), but we haven’t been certain how we want to recommend usage yet or include by default. It’s the same considerations as production where you can footgun an upgrade into bad state, ie you introduce a new assign in the template and mount, but the running LV doesn’t have it. That said, the LV will blow up, immediately remount and all will be well, so even in most footgun cases you can get back to working state without intervention. All that said, we need to make folks aware of the tradeoffs in the docs, and potentially have it be opt-in as needed vs always enabled for every LV. I definitely understand the QoL improvement this brings in dev – which was the whole reason we added it 
chrismccord
It’s harder than that. The example I gave of a missing assign that immediately crashing and remounts is the happy path which recovers to a good state, but there are other cases where the app can enter a bad state and not crash (ie you setup pubsub subscriptions or other stateful bits in mount that don’t happen for exisitng process, or you have timers that need to fire, or you had timers that were firing but you removed them and their handle_info clauses and they blow up the process at some point in the future. There’s not try/catch here that saves you. It’s less about transient errors which aren’t a big deal in dev and more about breaking apps in confusing ways, especially for folks that don’t really know what’s going on/why. So I think a non remount live reload is best opt-in where folks could add matches in their config for specific files, or some similar mechanism. Of course it’s fine to go all in and manually refresh as necessary if you know what’s going on, but as a general default it’s tricky to allow users to get into confusing or bad state that shouldn’t be possible to happen.
Jskalc
Thanks for explaining! I had a feeling it’s not a new thing.
It gave me a huge productivity boost. Considering how much engagement my tweet received, it was also useful to others.
I understand your reasoning about being careful to set it as a default, but it would be great to raise awareness. I see these hopefully reasonable options:
- Set it as a default, and maybe automatically catch re-render errors when hot-updated with missing assign, so console won’t be cluttered by transient errors
- Include commented out in the generated config, with a short explanation what it would do.
- Mention it either in the installation instructions or LiveReload docs
- Make it an CLI option in
phx.newgenerator?
Personally I’d love to see 1) happen, or 2) if 1) is too dangerous. I might help with a PR if needed.
PS. Thanks to that feature, I was able to achieve amazing DX with my up-and-coming LiveVue library (LiveSvelte but for Vue + Vite). Updates both in JS and EX files are reflected instantly, keeping the state intact. It feels like cheating 
Popular in Guides/Tuts
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Move fast and fix things! Error tracking with less noise for Elixir devs who love to ship. Start your free dev account.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking for Elixir devs who love to ship. Start your free account.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"