Asset pipeline not working with `package.json`

Hi,

I have an Elixir/Phoenix app that uses both esbuild and the tailwind binary for assets, but also package.json/npm for vendor JS.

I created a assets.deploy rule with the following order:

"assets.deploy": [
  "tailwind default --minify",
  "esbuild default --minify",
  "phx.digest"
]

This is my tailwind config…:

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

…and my esbuild config:

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

This setup works fine on my machine, but not in production: the JS called from package.json seems not to be loaded in priv/static/assets/app.js.

In production I have:

total 380K
-rw-r--r--    1 nobody   nobody     78.9K Apr  8 09:58 app.css
-rw-r--r--    1 nobody   nobody    297.7K Apr  8 09:58 app.js

while in local my app.js file is 2 MB, and app.css is ~200 KB.

I can’t find the problem, and there is no boilerplate on this (Phoenix projects on GitHub have no vendor JS so no package.json either).

What am I missing here?

1 Like

Forgot to add my Dockerfile:

...
# install npm dependencies
COPY assets/package.json assets/package-lock.json ./assets/
RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error

COPY priv priv
COPY lib lib
COPY assets assets
RUN mix assets.deploy
...
1 Like

I have the same issue.
@fdeage, were you able to solve it?
anyone else, maybe?

Few min after posting solved it.
:slight_smile:
The solution is not to use npm install --save, but just put the asset into the vendor directory. In that way Phoenix build will pick it up and all is golden.

1 Like