Is there anyway to use LiveView without Webpack/NPM?
brightball
tme_317
I haven’t tried this yet but I’m pretty sure you can copy the minified JS from Github into your /priv/static/js then use <script> tags in your layout like this:
<script src="<%= Routes.static_path(@conn, "/js/phoenix-v1.5.0-rc.0.js") %>"></script>
<script src="<%= Routes.static_path(@conn, "/js/phoenix_live_view-v0.12.1.js") %>"></script>
<script src="<%= Routes.static_path(@conn, "/js/app.js") %>"></script>
1
jaimeiniesta
The new LiveDashboard is awesome, I found the Request Logger an excellent help to debug the application.
Is there a way to exclude the LiveDashboard from reloads by the LiveReload?
My use case is the following: I have 2 browser tabs open, one with my app, the other one with the LiveDashboard. I enable the cookie parameter on the Request Logger, so the requests appear live. Then I change my app, say, the layout or a template, so LiveReload kicks in, reloads my app, which is fine, but at this point I expected the Request Logger show the new logs.
Instead, the whole LiveDashboard is reloaded, so I have to enable the cookie again. If we could make the Dashboard opt-out of live reload somehow, the workflow would so much better.
2
chrismccord
Creator of Phoenix
You can conditionally call the plug 
if code_reloading? do
socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
- plug Phoenix.LiveReloader
+ plug :live_reloader, exclude: ["/dashboard"]
plug Phoenix.CodeReloader
plug Phoenix.Ecto.CheckRepoStatus, otp_app: :drive_in
end
+ defp live_reloader(conn, exclude: excludes) do
+ if conn.path_info in excludes do
+ conn
+ else
+ Phoenix.LiveReloader.call(conn, Phoenix.LiveReloader.init([]))
+ end
+ end
12
jaimeiniesta
Thanks Chris! This worked fine. For the record, I changed it a bit to:
if code_reloading? do
socket("/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket)
plug :live_reloader, exclude: "dashboard"
plug(Phoenix.CodeReloader)
end
defp live_reloader(conn, exclude: exclude) do
if exclude in conn.path_info do
conn
else
Phoenix.LiveReloader.call(conn, Phoenix.LiveReloader.init([]))
end
end
3
polypush135
You will need to acquire the js libs for phoenix and manager the resources your self like you would back in the day. As far as I know there is no dependency on Webpack or Npm as Webpack is just a packager and Npm is just a package look up tool.
Though to be honest if you didn’t already know this, then you probably would greatly benefit from the services of both. That said I still have rage fits with Webpack even after using it for almost 3 years. Don’t get me started on tree shaking in production!
2
polypush135
Reviewing a newly generated app using the --live option I noticed there is a few small changes to the layouts.
Mostly the addition of the put_root_layout helper in the router and the new template/layouts.
- app.html.eex
- live.html.leex
- root.html.leex
As noted before I see that the put_root_layout is calling on the root.html.leex layout and the live_view macro is calling on the live.html.leex layout.
That said I can’t seem to find anywhere that is calling on the app.html.eex is that to say its an orphaned file produced by the generator? Is it assumed to be used at some later point?
0
polypush135
I think the news about 1.5.0 has been missed by the fact this pin still says 1.5.0-rc0. Maybe update the title?
1
josevalim
Creator of Elixir
If you want to submit a PR that adds this feature directly to Phoenix.LiveReloader, we will gladly accept it. Although it probably needs to be made a bit more general:
plug Phoenix.LiveReloader, exclude: ["/dashboard", "/foo/bar"]
6
josevalim
Creator of Elixir