Webpack Dev Server and DDEV (no backend site available)

I followed the accepted answer on this question: https://stackoverflow.com/questions/64390344/accessing-webpack-dev-server-output-with-specific-port-in-ddev-docker-containe

Trying to access the urls at

http://localhost:8080 results in503: No ddev back-end site available.

http://<project>.ddev.site:8080 results in 502: Unresponsive/broken ddev back-end site.

Per the answer on the other questions, I added a docker-compose.devserver.yaml file with the following contents:

version: "3.6"
services:
  web:
    expose:
      - 8080
    environment:
    - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,8080:8080
    - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,8081:8080

The dev server options are as follows:

const devServerOptions = {
    clientLogLevel: 'info', // 'debug',
    contentBase: [
        path.join(__dirname, webPath),
        path.join(__dirname, templatesPath),
    ],
    compress: true,
    disableHostCheck: true,
    historyApiFallback: true,
    host: devServerHost,
    hot: true,
    hotOnly: false,
    headers: {
        'Access-Control-Allow-Origin': '*',
    },
    https: devServerIsHttps
        ? {
              key: fs.readFileSync(process.env.DEVSERVER_KEY),
              cert: fs.readFileSync(process.env.DEVSERVER_CRT),
              ca: fs.readFileSync(process.env.DEVSERVER_CA),
          }
        : false,
    inline: true,
    overlay: true,
    port: devServerPort,
    public: publicPath,
    publicPath: '',
    watchContentBase: true,
    watchOptions: {
        poll: !!parseInt(process.env.DEVSERVER_POLL || 0),
        ignored: /node_modules/,
    },
}

Which is pulling the following .env vars:

DEVSERVER_ENABLED=true
DEVSERVER_HOST=localhost
DEVSERVER_PORT=8080
DEVSERVER_HTTPS=false

Assets are attempted to load when I visit http://<project.ddev.site at http://localhost:8080/dist/styles/main.min.css for instance and result in the 503 error mentioned about where there's no backend ddev site available.

If I remove the docker-compose file mentioned above and instead add to the .ddev/config.yaml file:

web_extra_exposed_ports:
  - name: devserver
    container_port: 8080
    http_port: 8080
    https_port: 8081

Without running my yarn dev (cross-env NODE_ENV=development webpack serve --stats=minimal --progress) command and then running ddev exec curl localhost:8080, I receive connection refused.

After running yarn dev, I receive the index.html file of my apps main entry point. (This is a Craft CMS app, so it's pulling the index.html in the templates. Pulls Twig comments too, so it's outputting the actual file contents)

The way I solved this issue may not work for everyone.

One thing I found is that I had to have the dev server accessible via a DDEV url, i.e <project-name>.ddev.site instead of localhost.

Next, I was having issues with ports. This may vary for other people, but I first tried ports 1339, 8080, 8000, with no luck. It wasn't until I used 9000 that I had luck.

For exposed ports in DDEV, I did not need to create a new docker-compose file, but rather use the web_extra_exposed_ports option in the config.yaml file in the .ddev folder.

web_extra_exposed_ports:
  - name: devserver
    container_port: 9000
    http_port: 9000
    https_port: 9001

Note: you need the https_port even if you do not plan on using https.

Finally, in my package.json where the command is created to run the webpack dev server, I needed to add the option --host=0.0.0.0

And of course, make sure you start the webpack dev server before navigating to your site.