Help setting up Phoenix.LiveReloader

Interesting problem. I’ve never delved into live reloading before, but I found two problems with your setup.

First of all, the code reloading is guarded by the code_reloading? variable in the endpoint module. Typically it’s turned on in your config/dev.exs. It wasn’t enabled in your configuration. Since it’s a compile-time configuration, you can’t pass it as one of the options, like you do with the other Endoint opts. You can enable it by adding this to your config/dev.exs file:

config :bootstrap_live, BootstrapLive.Server.Endpoint, code_reloader: true

(btw, it’s a bit confusing that there are now two dev.exs scripts in your project :slight_smile: )

The second issue has to do with the way you set up your layouts. The LiveReloader plug works by injecting an iframe into your application. With the code as-is (with the above config change enabled), you see that there is no iframe being loaded, and no separate websocket for the live-reloading mechanism. In your setup there is no root layout defined. You only have a dynamic/app layout (which is called root.heex, but is not actually configured as your root layout). I suspect that the LiveReloader plug cannot inject the iframe without the root layout, and hence the live reloading doesn’t work. I’ve tried configuring your layout as a root layout (using the usual :put_root_layout plug), instead of using that layout as a regular/dynamic layout. I got the inspiration from this forum post that hinted at how the layouts need to be structured in order for the reloading iframe to be injected. If you want to use regular/dynamic layouts in addition to the root layout, that’s no problem at all.

These two changes together seem to make live reloading work! :confetti_ball:

I’ve submitted a PR with the two changes for completeness. Hopefully you’re able to replicate these findings.

PS: that’s a very nice nvim setup! Might steal it some day :smiley:

3 Likes