How to make Encore work with Docker?

[SqueedWalz]

I have setup an Adonis project using Docker, all worked great until I added Encore, now the assets (js and css) are not loading. In my development environment I can see that it tries to fetch the asset files using http://0.0.0.0:8080/assets as host and port, when I manually go to http://localhost:8080/assets I can see the assets. How do I get it to work in my dev env using Docker and Encore.

.env

PORT=3333
HOST=0.0.0.0
NODE_ENV=development
...

docker-compose.yml

...
    ports:
      - ${PORT}:${PORT}
      - 9229:9229
      - 8080:8080
    env_file:
      - .env
    environment:
      - PG_HOST=postgres
    volumes:
      - ./:/home/node/app
    command: dumb-init node ace serve --watch --encore-args="--host ${HOST} --port 8080"

If I manually go in and change the entrypoint.json file paths to use localhost and then reload the page it works, but not with the auto-generated 0.0.0.0 host.

I have tried to change HOST in my .env file to localhost without any success.

I have also noted that the changes I do in the js and css files in the resources folder are only showing if I restart the dev environment, does not "hot load". But the changes I do in the edge templates show immediately after refresh.
And if I change the entrypoint.json file in the public folder to use localhost instead of 0.0.0.0 manually all the js and css gets loaded correctly, but as soon as I restart the dev environment it changes back to 0.0.0.0 in the entrypoint.json.

This is how the startup of the application looks in Docker.

Anyone has any ideas on what is missing?

[WeyIin]

Hi, have you found the solution?

I just configured project, docker and webpack and I face the same issue -

it works okay without the docker. In the console I see this:

> node ace serve --watch --encore-args="--port 5000"


[ info ]  building project...

[ info ]  starting http server...

[1662503842103] INFO (project/29 on 109230c48681): started server on 0.0.0.0:3333

[ encore ] Running webpack-dev-server ...

[ info ]  watching file system for changes

╭────────────────────────────────────────────────────────╮

│                                                        │

│    Server address: http://127.0.0.1:3333               │

│    Watching filesystem for changes: YES                │

│    Encore server address: http://localhost:5000        │

│                                                        │

╰────────────────────────────────────────────────────────╯

UPDATE: public/assets/manifest.json

UPDATE: public/assets/entrypoints.json

[ encore ]  DONE  Compiled successfully in 3322ms10:37:25 PM

[ encore ] webpack compiled successfully

DELETE: public/assets/app.js
DELETE: public/assets/search.js
DELETE: public/assets/style.css
DELETE: public/assets/style.js
DELETE: public/assets/topicList.js
DELETE: public/assets/vendors-node_modules_jquery_dist_jquery_js.js

Why is it being deleted? Also encore doesn't watch for file changes in docker.

[SqueedWalz]

I got a response in the Adonis Discord, in short terms the cookbook for Docker is aimed at production deploys not local development.

------------------ Reply in Discord------------------
Docker cookbook (production)
It states it as production
For local development and for production you need different setups
Dockerizing Adonis
Learn how to utilize docker for development and deployment of Adonis apps
What Docker eliminates is local and prod Node versions differing
Or MUSL vs GCC differences etc
It does not eliminate packages difference, your own code setup differences etc
For production you don't need things like Typescript compiler, debug logging tools, linters, tests etc. Those are all needed for development
You can install them all in one container and then just ship all your development tools to prod too, but would you really do it when not using container?
It kinda beats the point of making as small as possible portable containers
If you want to develop inside container, then you need 2 versions of it. One with all dev tooling installed and where code is mounted into as a volume on host
And other for production, where there are no dev-tools and code lives inside the container, not mounted to there from host
Even if you'd add all the dev tooling to production container to reduce differences between dev and prod, you still end up having code in container differently, while developing code lives on your computer, in production you want to deploy container itself as standalone thing and not link code on computer (or server) into container

[galaczi]

The guide states:

If you're using encore you need to make sure that host and port from encore are correctly set, and you're exposing encore's port. An easy way of doing it is by simple changing ports and the command.

ports:

${PORT}:${PORT}
9229:9229
8080:8080
command: dumb-init node ace serve --watch --encore-args="--host ${HOST} --port 8080"

Another trick is to use host mode networking.

Also keep in mind that the docker-compose.yml in the guide exposes Redis and Postgres ports by default, which might not be a good default for most people.

[SqueedWalz]

As you might have seen in the initial post I made I have followed the guide and updated the ports and command as per the guide. The issue is that this seems to be a production setup and not a local development setup.

[0xACCE55]

I managed to solve this by adding the --public arg to the command in the docker-compose.yml.

docker-compose.yml

...
command: dumb-init node ace serve --watch --encore-args="--host ${HOST} --port 8080 --public 127.0.0.1:8080"

Added --public 127.0.0.1:8080. You could use localhost:8080 as well.

[JaoMarcos]

It worked for me as well, however I also had to expose the 8080 port and set --host to 0.0.0.0