Webpack-encore: dev-server inside docker?

[samjarrett]

Hi,

I'm trying to get encore dev-server to work inside a docker container.

I noticed at first that it listens only on the container's loopback interface ('localhost'), which was OK, because I could use --host 0.0.0.0 to get it to listen on the proper network interface...

But when I do this the manifest.json ends up using http://0.0.0.0:8080/.... as it's url prefix, and this stops the assets from loading.

I tried the --public ... flag to set a hostname for the public URL, but that doesn't seem to affect manifest generation.

How can I do this?

Thanks.

[davidmpaz]

I haven't tried this yet but one hint would be to treat your container like another named virtual host. If you are referencing them (containers) inside docker network use the container name, if it is from outside I think you will need to modify your /etc/hosts file to recognize the name you are using.

Then, use the assets as you would like with a CDN. Look here at end this add the prefix you want with a know url.

If this doesn't helps, please add more information, if possible, configuration files etc.

Cheers

[samjarrett]

Hey @davidmpaz, good thought. Doesn't work though. :(

webpack.config.js:

// .. rest of configuration

if (!Encore.isProduction()) {
    Encore.setPublicPath('http://localhost');
    Encore.setManifestKeyPrefix('/assets/build/');
}

and got this error:
Error: You cannot pass an absolute URL to setPublicPath() and use the dev-server at the same time. Try using Encore.isProduction() to only configure your absolute publicPath for production.

(Note: same error regardless of hostname)

[davidmpaz]

@samjarrett lets try to separate issues. From:

I'm trying to get encore dev-server to work inside a docker container.

I assume this is not related to Encore but with a development enviroment which can work without Encore. So my question are:

1. Does It works if you remove Encore from the dev stack?
2. Can you start webpack-dev-server and see your project's assets being served?

If so, next comes Encore troubleshooting. If not, then docker, webpack setup toguether need to be addressed first.

[samjarrett]

Hey @davidmpaz, actually it's an issue with how encore bundles a few webpack configuration items into one setting, which in a docker (or any remote dev style environment) you would hit an issue with.

To recap the problem:

1. webpack dev server defaults to binding only on local loopback
2. Official --help on encore dev-server says to use --host= to change the bind
3. This also then changes the host name configured in webpack manifest plugin

Encore doesn't provide a way of altering the config manually for the manifest plugin. If I was using standard webpack config I would easily be able to override that.

[davidmpaz]

Ok, sorry for not being of more help ;) Maybe @weaverryan has an idea on how this can be solve?

[weaverryan]

Thanks for breaking this down guys. Indeed, you've described it perfectly: whwn you use dev-server, we automatically use whatever its host is as the publicPath (this affects the manifest.json paths but also internal paths in webpack in case you use code splitting).

Once fix might be to allow you to set the publicPath while use the dev-server, but issue a warning on the terminal. We want to avoid someone setting a CDN URL (in production and dev) and not having things work when they use the dev-server. I think this would still cover that :)

[Jeyffrey]

My project is based on a Docker and my container listen to the port 8088.
Symfony webpack-dev-server works by default on the port 8080.
In the docker-compose file, i just had to open the 8080 port in both sides :

services:
    ...
    my_container:
        ...
        ports:
            ...
            - "8080:8080".

And my Yarn script is now (according to this comment) :
"dev-server": "encore dev-server --host 0.0.0.0 --disable-host-check"

It just works now ! 🎉

[Kocal]

You can also check https://github.com/symfony/symfony-docs/pull/11422 :)