manhvu

manhvu

How to build separate assets of multi Phoenix app in umbrella

I have two Phoenix apps in umbrella but get stuck when build assets for each Phoenix app because umbrella using root config and Phoenix apps generated same config key for esbuild.

example config/config.exs

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/back/assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]
...
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/front1/assets", __DIR__),
    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
  ]

as above config file, I just have one last is used for all Phoenix apps. When I run mix assets.build only app have corrected assets.

I need to separate config esbuild for every Phoenix apps, anyone has any idea for this case?

Marked As Solved

ibarch

ibarch

According to esbuild docs, you can define multiple profiles under the same config key. Something like this:

in config/config.exs

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

then in mix.exs

  defp aliases do
    [
      "assets.build": ["esbuild back", "esbuild front1"],
      "assets.deploy": [
        "esbuild back --minify",
        "esbuild front1 --minify",
        "phx.digest apps/back/priv/static -o some/path",
        "phx.digest apps/front1/priv/static -o some/path"]
    ]
  end

Also Liked

manhvu

manhvu

Thank you for your support, it works!

I also apply for tailwind like esbuild and it works too!

my config:

config.exs:

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

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

...

config :back, Back.Endpoint,
  ...
  watchers: [
    esbuild: {Esbuild, :install_and_run, [:back, ~w(--sourcemap=inline --watch)]},
    tailwind: {Tailwind, :install_and_run, [:back, ~w(--watch)]}
  ]

...
config :front1, Front1.Endpoint,
  ...
  watchers: [
    esbuild: {Esbuild, :install_and_run, [:front1, ~w(--sourcemap=inline --watch)]},
    tailwind: {Tailwind, :install_and_run, [:front1, ~w(--watch)]}
  ]

apps\back\mix.exs:

  ...
  defp aliases do
    [
      setup: ["deps.get", "assets.setup", "assets.build"],
      test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
      "assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
      "assets.build": ["tailwind back", "esbuild back"],
      "assets.deploy": ["tailwind back --minify", "esbuild back --minify", "phx.digest"]
    ]
  end

apps\front1\mix.exs:

  ...
  defp aliases do
    [
      setup: ["deps.get", "assets.setup", "assets.build"],
      test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
      "assets.setup": ["tailwind.install --if-missing", "esbuild.install --if-missing"],
      "assets.build": ["tailwind front1", "esbuild front1"],
      "assets.deploy": ["tailwind front1 --minify", "esbuild front1 --minify", "phx.digest"]
    ]
  end

Where Next?

Popular in Questions Top

JorisKok
I have a server on AWS, and was running a load test using artillery. When looking at the Phoenix dashboard I see the Ports going to 100% ...
New
pgiesin
This should be a simple problem but I just can’t seem to figure it out. I have a standalone Elixir app that won’t find the database. Dep...
New
Werner
Hi, I’m using Ubuntu 18.04 and after updating to OTP-24.0 yesterday i have this warning when I run “mix local.hex”: 14:57:30.512 [warn] ...
New
stefanchrobot
What’s the safe way to decode a JSON string into a struct? I want to avoid calling String.to_atom. Jason.decode can give me a map with st...
New
mcarvalho
What is the difference between System.get_env and Application.get_env? For example, what are best practices to use one versus another.
New
Phillipp
Hey, I have a NanoPi-M3 and try to install Elixir on their Ubuntu image. I followed the Raspberry Pi installation instructions from the ...
New
chensan
I have a User schema with a :from_id field set to type :string: defmodule TweetBot.Repo.Migrations.CreateUsers do use Ecto.Migration ...
New
LegitStack
I’m trying to make a websocket server in Phoenix or raw Elixir. I heard about gun, I think I could use cowboy, but since I’m not that sma...
New
johnnyicon
Hi all, I've just started learning Elixir and Phoenix Framework, so please pardon my n00bness at this stage. I'm trying to use Postg...
New
lanycrost
Hi everyone! I need implement if…else if…else condition from my elixir code, and anymore of this control flow structures not work proper...
New

Other popular topics Top

peerreynders
Manning 2016 Halloween weekend sale via Deal of the Day Friday, October 28 - Half off all MEAPs - code WM102816LT Saturday, October 29 ...
326 29600 154
New
senggen
Erlang/OTP 25 [erts-13.2.2] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] 15:22:35.803 [error] gen_event {lager_file_backend...
New
albydarned
Hello all! I am typing this post from my new MacBook Pro with the M1 chip. I’m loving it so far, and will probably use it as my daily dr...
New
aalberti333
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
New
KronicDeth
Elixir plugin for JetBrain’s IntelliJ Platform (including Rubymine) This is a plugin that adds support for Elixir to JetBrains IntelliJ...
289 35421 110
New
chrismccord
As promised, the first release candidate of Phoenix 1.3.0 is out! This release focuses on code generators with improved project structure...
New
ashish173
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
New
shahryarjb
Hello, I have map which I want to convert it to string like this: the map: %{last_name: "tavakkoli", name: "shahryar"} the string I ne...
New
TunkShif
This post is an instruction guide to help you setup your Neovim for Elixir development from scratch. It includes general information on h...
273 38985 115
New
magnetic
Hey :wave:t3: Elixir community, I’ve been learning Elixir, and working on some side projects. My editor of choice is VSCode, and althoug...
New

We're in Beta

About us Mission Statement