symfony / webpack-encore

A simple but powerful API for processing & compiling assets built around Webpack
https://symfony.com/doc/current/frontend.html
MIT License
2.23k stars 198 forks source link

Question for docker/DDEV usage: --public option is deprecated? #1205

Open mandrasch opened 1 year ago

mandrasch commented 1 year ago

Hi, thanks so much for providing webpack-encore, awesome tool!

I'm a bit confused about the recent changes.

For the usage in Docker tool DDEV I use the following config and invoke encore dev-server with --public:

  "scripts": {
    "dev": "encore dev-server --public https://my-wordpress-site.ddev.site:5173",
    "watch": "encore dev --watch",
    "build": "encore production --progress",
    "build-dev": "encore dev --watch"
  },

That allowed me to achieve the following manifest.json-output with the DDEV url instead of localhost:

{
  "wp-content/themes/neve-child/dist/main.css": "https://my-wordpress-site.ddev.site:5173/wp-content/themes/neve-child/dist/main.css",
  "wp-content/themes/neve-child/dist/main.js": "https://my-wordpress-site.ddev.site:5173/wp-content/themes/neve-child/dist/main.js"
}

My webpack.config.js is the following:

 .configureDevServerOptions((options) => {
    options.host = "0.0.0.0";
    options.allowedHosts = "all";
    options.port = 5173; // switch port to vite standard 
});

My .ddev/config.yaml for exposing the port:

# expose port for webpack encore dev server
web_extra_exposed_ports:
  - name: node-js
    container_port: 5173
    http_port: 5172
    https_port: 5173

I tried to move the --public setting to webpack.config.js, because I wanted to use it like that:

 .configureDevServerOptions((options) => {
    options.host = "0.0.0.0";
    options.allowedHosts = "all";
    options.port = 5173; // switch port to vite standard 

    // new:
    options.public = `${process.env.DDEV_PRIMARY_URL}:5173`;

});

That gave me the error:

[webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'public'. These properties are valid:
   object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? }
Task failed: Exec command 'npm run dev' in container/service 'web': exit status 2 

I saw this guide (https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md) for migration, but I was not able to use the v4 version correctly?

module.exports = {
  devServer: {
    client: {
      // Can be `string`:
      //
      // To get protocol/hostname/port from browser
      // webSocketURL: 'auto://0.0.0.0:0/ws'
      webSocketURL: {
        hostname: "0.0.0.0",
        pathname: "/ws",
        port: 8080,
      },
    },
  },
};

Always ended up with localhost:8080 in dist/manifest.json.

Two questions:

  1. Is --public a special CLI feature provided by Webpack Encore?
  2. Will it be removed in future versions?

Thanks very much in advance! I can provide a demo repository if needed of course.

(A future workaround would be to parse manifest.json via PHP and replace localhost:8080 of course). Might also be related to https://github.com/symfony/webpack-encore/issues/1202

carsonbot commented 1 month ago

Thank you for this issue. There has not been a lot of activity here for a while. Has this been resolved?

mandrasch commented 1 month ago

Thank you for this issue. There has not been a lot of activity here for a while. Has this been resolved?

Not resolved - I currently don't use webpack-encore.

Feel free to close if not relevant, but instructions on how to use it with DDEV / Docker could be maybe helpful for some devs.