pedromvieira

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 2490 5

2018-09-01 17:02:07 UTC

First 5 of 5 Posts

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 #1

outlog

I output full static asset paths in json using this:

defmodule MyApp.Web.Asset do
  def full_path(asset) do
    MyApp.Web.Endpoint.static_url() <> MyApp.Web.Endpoint.static_path(asset)
  end
end

eg: MyApp.Web.Asset.full_path(“/images/3.png”)

requires you config static_url for all envs

static_url: [scheme: "http", host: "comp.local", port: 4001],

so that might be useful - though you are tightly coupling the two phoenix apps, which leads me to believe they should perhaps be united.. also I would assume you need to set CORS headers, deal with same-origin and all kinds of other stuff.. so the real(off-topic) question is perhaps why two separate phoenix apps?

Post #2

leifericf

This exact topic was discussed on one of the ElixirTalk podcast episodes. I think that conversation might be useful to you. If I remember correctly, it was @desmond who brought it up and provided some examples. I’ll see if I can find the exact episode for you when I get back on my desktop later (writing from mobile now).

Post #3

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 #4