I’m trying to port bootstrap components and functionality to phoenix live view, in a Plug&Play way. I set up my dev web server in a single file to easily start it from terminal, as can be found in dev.exs and server.ex files!
My problem is that, although I set up Phoenix.LiveReloader plugs and pattern on Endpoint config, it doesn’t seems to work for my live modules, which are placed at lib/bootstrap_live/live/*. Changes are only applied if I kill the script and run it again.
Static changes tough, like CSS or JS are only applied if I reload the page on browser, while server is running. Am I doing something wrong?
The full repository is: GitHub - zoedsoupe/bootstrap_live: Boostrap components ready to use in Phoenix LiveView applications! Just Plug&Play!
1 Like
Hmm, it doesn’t look like your root layout located at lib/bootstrap_live/layouts/root.html.heex is covered with the currently configured set of patterns.
Try adding the layouts folder in addition to the live folder with something like this:
~r"lib/bootstrap_live/(live|layouts)/.*(ex|heex)$"
2 Likes
This change doesn’t seems to take effect either 
Here’s a showcase:
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 
)
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! 
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 
3 Likes
Really well done explanation! Now it’s clear what I was doing wrong. I often have problems with these configs options in different stages (compile/runtime) with phoenix haha
btw, it’s a bit confusing that there are now two dev.exs scripts in your project
I was trying to do a minimal phoenix/web server setup as this lib intend to only make an abstraction to bootstrap components. Kinda inspired on surface-bootstrap
Thank you so much!
1 Like
