How to compile frontend assets in Adonis app while it's running in a Docker container?

Question

This Adonis application fails compiling frontend assets while running inside Docker container. The app was scaffolded using yarn utility container defined at docker-compose.yaml file running docker compose run --rm yarn create adonis-ts-app app command and selecting true for ESLint, Prettier and Encore choices.

% What Actually Happens %

The application fails to compile assets. No sign of error from the running container:

$ docker compose logs app
docker-bind-mount-issue-app-1  | yarn run v1.22.17
docker-bind-mount-issue-app-1  | $ node ace serve --watch
docker-bind-mount-issue-app-1  | [ info ]  building project...
docker-bind-mount-issue-app-1  | [ info ]  starting http server...
docker-bind-mount-issue-app-1  | [ encore ] Running webpack-dev-server ...
docker-bind-mount-issue-app-1  | [ info ]  watching file system for changes
docker-bind-mount-issue-app-1  | [1645110239969] INFO (app/39 on b105e817d618): started server on 0.0.0.0:3333
docker-bind-mount-issue-app-1  | ╭────────────────────────────────────────────────────────╮
docker-bind-mount-issue-app-1  | │                                                        │
docker-bind-mount-issue-app-1  | │    Server address: http://127.0.0.1:3333               │
docker-bind-mount-issue-app-1  | │    Watching filesystem for changes: YES                │
docker-bind-mount-issue-app-1  | │    Encore server address: http://localhost:8080        │
docker-bind-mount-issue-app-1  | │                                                        │
docker-bind-mount-issue-app-1  | ╰────────────────────────────────────────────────────────╯
docker-bind-mount-issue-app-1  | [ encore ]  DONE  Compiled successfully in 14380ms3:04:08 PM
docker-bind-mount-issue-app-1  | [ encore ] webpack compiled successfully

Here's the screenshot.

% What I Expect %

Assets should be compiled by Webpack Encore and I should get a confirmation like the following:

yarn run v1.22.15
$ node ace serve --watch
[ info ]  building project...
[ info ]  starting http server...
[ encore ] Running webpack-dev-server ...
[ info ]  watching file system for changes
[1645110644372] INFO (app/9208 on msrumon): started server on 0.0.0.0:3333
╭────────────────────────────────────────────────────────╮
│                                                        │
│    Server address: http://127.0.0.1:3333               │
│    Watching filesystem for changes: YES                │
│    Encore server address: http://localhost:8080        │
│                                                        │
╰────────────────────────────────────────────────────────╯
UPDATE: public\assets\manifest.json
UPDATE: public\assets\entrypoints.json
[ encore ]  DONE  Compiled successfully in 1449ms9:10:46 PM
[ encore ] webpack compiled successfully

Here's the screenshot.

% Reproduction Steps %

1. Clone the above repository.
2. Install dependencies by running docker compose run --rm yarn install.
3. Start the development server by running docker compose up --detach app.
4. Browse http://localhost:3333 from any browser.

% Extra Note %

When I install the dependencies using yarn utility container (docker compose run --rm yarn install) and then start the server directly from host machine (yarn run dev), I get 'encore' is not recognized as an internal or external command, operable program or batch file. error:

$ docker compose run --rm yarn install
[+] Running 1/0
 - Network docker-bind-mount-issue_default  Created                                                                                                                                                                  0.0s
yarn install v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

Done in 159.92s.

$ yarn run dev
yarn run v1.22.15
$ node ace serve --watch
[ info ]  building project...
[ info ]  starting http server...
[ encore ] 'encore' is not recognized as an internal or external command,
operable program or batch file.
[ warn ]  Underlying encore dev server died with "1 code"
[1645111433640] INFO (app/27364 on msrumon): started server on 0.0.0.0:3333
[ info ]  watching file system for changes
╭────────────────────────────────────────────────────────╮
│                                                        │
│    Server address: http://127.0.0.1:3333               │
│    Watching filesystem for changes: YES                │
│    Encore server address: http://localhost:8080        │
│                                                        │
╰────────────────────────────────────────────────────────╯

Apparently node_modules/.bin was empty, but it wasn't when I ran yarn install directly on host machine. So, out of curiosity, I attempted to replicate the exact same issue for an Express app and nodemon binary to see whether the aforementioned directory stays empty or not. And I found that it wasn't empty. So I couldn't figure out where the problem was. I'd appreciate if anybody would be able to help me.

Answer 1

I tried multiple combinations of different solutions, and so far this seems to be the most consistent "workaround" I've got. I'm still open for solution.