Phoenix: Live reload the browser when files outside the project root change

Phoenix Forum Questions / Help
1

We have a Phoenix project located at /some/path/A
That project uses a library located at /some/path/B

B is a component library with its own css and javascript files.
We are watching those files for changes from within A and build them (working fine).

The browser doesn’t live reload after the build process.

We added the path of the built files within B to the live_reload: patterns: config, without success.

On A we have:

config :aaa, AAAWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$",
      ~r"lib/aaa_web/templates/.*(eex)$",
      ~r"../B/priv/static/.*(js|css|png|jpeg|jpg|gif|svg)$"
    ]
  ]

Any hints on how to achieve that?

1 Like
2

I never managed to make this setup work.

I had to hack and transform my A application into an umbrella and create in its apps/ folder a symlink to project B

3

Thank you.

Will think about that.

Cheers

4

I just stumbled on this issue earlier today. This GitHub Issue keyed me in on the solution. Despite the issue saying it’s not possible, if you do exactly that it works.

For example, in my config/dev.exs I have


posts_dir =
  case File.read_link(posts_dir = Path.expand("../priv/static/posts", __DIR__)) do
    {:ok, target} -> target
    {:error, _} -> posts_dir
  end

# Watch static and templates for browser reloading.
config :phoenix_live_reload, :dirs, [posts_dir, "./"]

config :app, AppWeb.Endpoint,
  live_reload: [
    patterns: [
      ~r"#{posts_dir}.*",
      ~r"priv/static/.*(js|css|png|jpeg|jpg|gif|svg|md)$",
      ~r"priv/gettext/.*(po)$",
      ~r"lib/app_web/(controllers|live|components)/.*(ex|heex)$"
    ]
  ]

Then i symlink my ~/blog/posts directory into priv/static/posts and live reloading of my blog posts’s markdown files work.

1 Like