Building priv/static assets for two phoenix apps in one umbrella

Phoenix Forum Questions / Help
1

I have an umbrella app with an existing Phoenix app inside. I want to add another phoenix app, listening on a different port.

I ran mix phx.new.web internal_ui --no-ecto --no-mailer from the apps folder of my umbrella to generate the app. All looked good. I changed the port to 4001 for the new app.

However, I noticed that when I built and ran my application, my assets for the new app did not get built. No app.js. No app.css. No minified or gzipped files.

Looking deeper, I see that there are two config :esbuild entries in the config.exs, and the one for the new app is first. Won’t the configuration for the second overwrite the first? When I move the esbuild config for the new app below the one for the original web app, my app.js does get built in the priv/static of my new app, but no CSS files get built.

How can I get my priv/static files to build for multiple Phoenix apps?

1 Like
2

Okay, I’ve got this one figured out after reading this StackOverflow post. It’d be awesome if the phx.new.web generator could figure this one out, or perhaps detect the condition and give the developer a clue as to how to proceed.

The generated esbuild and tailwind configs both have a default profile. The new web app requires a different profile under the existing config :esbuild and config :tailwind keys, with a name other than default.

For example:

config :tailwind,
  version: "3.3.2",
  default: [
    args: ~w(
      --config=tailwind.config.js
      --input=css/app.css
      --output=../priv/static/assets/app.css
    ),
    cd: Path.expand("../apps/job_web/assets", __DIR__)
  ],
  internal_ui: [
    args: ~w(
      --config=tailwind.config.js
      --input=css/app.css
      --output=../priv/static/assets/app.css
    ),
    cd: Path.expand("../apps/internal_ui/assets", __DIR__)
  ]

and

config :esbuild,
  version: "0.17.11",
  default: [
    args:
      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../apps/job_web/assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ],
  internal_ui: [
    args:
      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
    cd: Path.expand("../apps/internal_ui/assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

Then, back in the dev.exs config, you have to edit the generated watchers key, replacing default with the key you specified in the tailwind and esbuild configs for the new profile.

If anyone knows of anything else that needs to be done, please reply with additions.

Cheers!

6 Likes
3

[deleted]