phoenix_live_reload

It is important to distinguish between these two tools:

• Phoenix.CodeReloader: Recompiles Elixir code in the lib directory. Changes to Elixir files are reloaded on the next request.
• phoenix_live_reload: Injects JavaScript into your page to provide a WebSocket connection. It triggers browser reloads for templates, views, and JavaScript/CSS changes. If an Elixir file changes, it is recompiled and then the page is reloaded via the WebSocket. For assets like CSS/JS, it allows reloading without a full page refresh.

To prevent phoenix_live_reload from attempting to reload stylesheets served from a remote host, add the data-no-reload attribute to the <link> tag.

<link rel="stylesheet" href="http://example.com/style.css" data-no-reload>

Add phoenix_live_reload to your mix.exs dependencies to enable live-reloading functionality in your Phoenix project during development.

def deps do
  [{:phoenix_live_reload, "~> 1.5"}]
end

You can include additional JSON-serializable metadata in the log events by setting the :web_console_logger_forward_metadata option in your config/dev.exs.

config :my_app, MyAppWeb.Endpoint,
  live_reload: [
    web_console_logger_forward_metadata: [:time]
  ]

In your config/dev.exs, you can configure the live_reload options for your Endpoint. You can specify a custom interval (in milliseconds) and a list of patterns to watch. The default interval is 100ms.

# Watch static and templates for browser reloading.
config :my_app, MyAppWeb.Endpoint,
  live_reload: [
    interval: 1000,
    patterns: [
      ~r"\.(ex|exs|heex)",
      ~r"\.(js|css)$"
    ]
  ]

To enable streaming server logs directly to your browser's web console, enable the web_console_logger in your endpoint configuration.

When enabled, the phoenix:live_reload channel subscribes to log events and pushes them to the client via the log event. Each log message includes:

• level: The log level as a string.
• msg: The log message.
• file: The file where the log originated.
• line: The line number.
• pid: The process ID.
• metadata: Any associated metadata.

# In your endpoint configuration
config :my_app, MyAppWeb.Endpoint, 
  live_reload: %{
    web_console_logger: true
  }

The project uses FileSystem to watch for changes. You can specify a :backend in config/config.exs.

Available backends:

• Default (OS-specific via FileSystem): Linux (inotify), Windows (inotify-win), Mac OS X (fsevents), FreeBSD/OpenBSD/BSD (inotify).
• :fs_poll: A polling backend available on all operating systems.

You can also explicitly define dirs (relative to project root) to watch to improve efficiency, and provide backend_opts like interval.

config :phoenix_live_reload,
  dirs: [
    "priv/static",
    "priv/gettext",
    "lib/example_web/live",
    "lib/example_web/views",
    "lib/example_web/templates"
  ],
  backend: :fs_poll,
  backend_opts: [
    interval: 500
  ]

In an umbrella application, if you want to trigger reloads based on code changes in sibling applications, you must perform two steps:

1. Set the reloadable_apps option on your endpoint to ensure the sibling code is recompiled.
2. Configure the :dirs option for Phoenix.LiveReloader to include the directories of the sibling applications.
3. Ensure your :patterns in the live_reload config match the file types in those sibling applications.

Example configuration in config/dev.exs:

root_path =
  __ENV__.file
  |> Path.dirname()
  |> Path.join("..")
  |> Path.expand()

config :phoenix_live_reload, :dirs, [
  Path.join([root_path, "apps", "app1"]),
  Path.join([root_path, "apps", "app2"]),
]

To enable live-reloading in development, add the Phoenix.LiveReloader.Socket and the Phoenix.LiveReloader plug within a code_reloading? block in your endpoint.ex file. This ensures live-reloading is only active during development when code reloading is enabled.

if code_reloading? do
  socket "/phoenix/live_reload/socket", Phoenix.LiveReloader.Socket
  plug Phoenix.CodeReloader
  plug Phoenix.LiveReloader
end

If you need custom event handling for opening the editor, you can use reloader.openEditorAtCaller(target) and reloader.openEditorAtDef(target) directly.

// Example of manual implementation
let keyDown
window.addEventListener("keydown", e => keyDown = e.key)
window.addEventListener("keyup", e => keyDown = null)
window.addEventListener("click", e => {
  if(keyDown === "c"){
    e.preventDefault()
    e.stopImmediatePropagation()
    reloader.openEditorAtCaller(e.target)
  } else if(keyDown === "d"){
    e.preventDefault()
    e.stopImmediatePropagation()
    reloader.openEditorAtDef(e.target)
  }
}, true)