Example for usage of webpack dev-server with DDEV?

[mandrasch]

Hey,

just started out with using typo3_encore and exploring things. Thanks very much for providing it!

Before I fiddle around too much, a quick question:

Is there already an example repository for typo3_encore + DDEV by chance?

I wondered how I do tell webpack dev server to use "https://my-typo3-site.ddev.site" as origin/URL for loading the files? Currently the produced manifest uses https://localhost) and I haven't found this in the dev server docs.

(I'm experienced in using DDEV and exposing DDEV ports, e.g. via https://github.com/drud/ddev-browsersync or https://github.com/torenware/ddev-viteserve)

Thanks very much in advance for any tips!

Best regards,
Matthias
btw: Would love to have something like typo3_encore for vite + typo3 in future, think the simplicity of this extension is awesome! 👏

[mandrasch]

Ah, seems like I found it myself and --public did the trick. (Did not found this option for setting it in webpack.config.js though, only accessible via webpack dev-server cli?)

//file: package.json
  "scripts": {
    "dev": "encore dev-server --port 5137 --public https://typo3-fresh.ddev.site:5137",

// file: webpack.config.js
  .configureDevServerOptions((options) => {
    options.host = "0.0.0.0";
    options.allowedHosts = "all";
    // in older Webpack Dev Server versions, use this option instead:
    // options.firewall = false;
  });

# file: .ddev/docker-compose.webpack-dev-server.yaml
# Override the web container's standard HTTP_EXPOSE and HTTPS_EXPOSE
# This is to expose the webpack dev-server port, we use --port 5137 like vite
version: '3.6'
services:
  web:
    expose:
      - '5137'
    environment:
      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,5138:5137
      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,5137:5137

(I used vite port 5137 since 8080 is already used by DDEV)