Generated Dockerfile can't build assets installed with npm --save

[mrkurt]

Environment

• Elixir version (elixir -v): Elixir 1.17.3 (compiled with Erlang/OTP 27)
• Phoenix version (mix deps): 1.7.14
• Operating system: MacOS, Docker, and Linux

Actual behavior

I've installed xterm.js with npm i @xterm/xterm --save (straight from the phoenix docs), which placed it in assets/node_modules as expected. When I import this in either my app.css or app.js it works as expected when running in development:

@import "@xterm/xterm";

import { Terminal } from '@xterm/xterm';

When I attempt to build this with Docker, however, it fails because .dockerignore includes this:

# Static artifacts - These should be fetched and built inside the Docker image
/assets/node_modules/

Expected behavior

I'd like my Dockerfile to build my assets properly when I follow the docs for adding using an npm.

[spezi]

i had a similar problem like this when implementing https://schedule-x.dev/. The solution was to tell tailwindcss to generate a main.css instead of app.css and esbuild generates a new app.css because schedule-x has its own CSS and esbuild overwrites the tailwind generated app.css in such cases #5912 (comment)

Steps:

• Add nodes to the environment
• Copy app.css to main.css
• Configure Tailwind in config.exs to input and output main.css and not app.css
• Paste main.css into your root.html.heex

[almirsarajcic]

Rather than removing /assets/node_modules line from .gitignore, we should build assets in our Dockerfile.

Here's how it's done:
https://elixirdrops.net/d/7paEUio9

I remember the reason for removing npm from Phoenix was trying to streamline installation and using ESBuild instead with the goal of making really old Phoenix apps still work after years of sitting on the shelf, unlike apps using npm dependencies.
Not sure if there should be an option/flag to still include npm, but at least the docs could include instructions on what to do in Dockerfile to achieve this.
https://hexdocs.pm/phoenix/asset_management.html#third-party-js-packages