pedromvieira

Phoenix Umbrella Multiple Web Apps static assets

How can we share static files (css, js) between multiple Phoenix Web apps inside umbrella?

endpoint

plug Plug.Static,
at: "/", from: :my_app, gzip: false,
only: ~w(css fonts images js favicon.ico robots.txt)

web_a app.html.eex

<!-- CSS -->
<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
<!-- JS -->
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

web_b app.html.eex

<!-- CSS -->
<link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
<!-- JS -->
<script src="<%= static_path(@conn, "/js/app.js") %>"></script>

Currently my 2nd app dosent load css created by digest.
Is there a way to break into multiple css and load based on app (ex: app.css + custom_a.css)?

5 comments

/phoenix #css #assets

1 2430 5

2018-09-01 17:02:07 UTC

Most Liked

desmond

In the case of an umbrella with two sub-apps, each with a single Phoenix endpoint, you can do:

Endpoint 1:

defmodule AppA.Endpoint do
    plug Plug.Static,
    at: "/", from: :app_a, gzip: false,
    only: ~w(css fonts images js favicon.ico robots.txt)
  # ...

Endpoint 2:

defmodule AppB.Endpoint do
    plug Plug.Static,
    at: "/", from: :app_a, gzip: false,
    only: ~w(css fonts images js favicon.ico robots.txt)
  # ...

and keep the

    <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">

unmodified from its original form. It will request assets from its own endpoint, which the Plug.Static will serve either from its own assets (for AppA) or from the assets of a different app within the umbrella (AppB). Basically all your assets are served from AppA. There’s no magic to that- specifying a different app just tells the plug to look in a certain directory, it doesn’t really “know” about the other app and doesn’t go through its Phoenix request stack. So it’s pretty fast.

To serve a main stylesheet across apps plus a custom stylesheet for a particular app, I’d recommend making a separate Phoenix app (or endpoint) called assets whose only purpose is to serve assets. Then you point all your Plug.Statics to serve assets from that assets app. You need to tell brunch how to output the correct segregated asset files, like app.css, app1.css, etc. Then in your app.html.eex, something like:

    <link rel="stylesheet" href="<%= static_path(@conn, "/css/app.css") %>">
    <link rel="stylesheet" href="<%= static_path(@conn, "/css/app1.css") %>">

Post #5

leifericf

Found it! Check out ElixirTalk Episode #103, starting at 25:52

Thanks for sharing that, @desmond.

Post #6

jeremyjh

Umbrella projects are for sharing a mix.lock file and associated dependencies between multiple OTP applications. They don’t have anything to offer to the subject of web assets. If it makes sense to have multiple web apps in an umbrella, probably the only reasonable way to share assets would be through symlinks.

Post #2