title: webpack-dev-server proxy to docker container
body: <p>I have 2 docker containers managed with docker-compose and can't seem to properly use webpack to proxy some request to the backend api.</p>
  
  <p>docker-compose.yml :</p>
  
  <pre><code>version: '2'
  
  services:
    web:
      build:
        context: ./frontend
      ports:
        - "80:8080"
      volumes:
        - ./frontend:/16AGR/frontend:rw
      links:
        - back:back
    back:
      build:
        context: ./backend
      expose:
        - "8080"
      ports:
        - "8081:8080"
      volumes:
        - ./backend:/16AGR/backend:rw
  </code></pre>
  
  <p>the service <em>web</em> is a simple react application served by a webpack-dev-server.
  the service <em>back</em> is a node application.</p>
  
  <p>I have no problem to access either app from my host :</p>
  
  <pre><code>$ curl localhost
  &gt; index.html
  $ curl localhost:8081
  &gt; Hello World
  </code></pre>
  
  <p>I can also ping and curl the <em>back</em> service from the <em>web</em> container :</p>
  
  <pre><code>$ docker ps
  CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                    NAMES
  73ebfef9b250        16agr_web           "npm run start"     37 hours ago        Up 13 seconds       0.0.0.0:80-&gt;8080/tcp     16agr_web_1
  a421fc24f8d9        16agr_back          "npm start"         37 hours ago        Up 15 seconds       0.0.0.0:8081-&gt;8080/tcp   16agr_back_1
  
  $ docker exec -it 73e bash
  $ root@73ebfef9b250:/16AGR/frontend# curl back:8080
  Hello world
  </code></pre>
  
  <p>However i have a problem with the proxy.
  Webpack is started with </p>
  
  <pre><code>webpack-dev-server  --display-reasons --display-error-details --history-api-fallback --progress --colors -d --hot --inline --host=0.0.0.0 --port 8080
  </code></pre>
  
  <p>and the config file is</p>
  
  <p>frontend/webpack.config.js :</p>
  
  <pre><code>var webpack = require('webpack');
  var config = module.exports = {
    ...
    devServer: {
      //redirect api calls to backend server
      proxy: {
        '/api': {
          target: "back:8080",
          secure: false
        }
      }
    }
    ...
  }
  </code></pre>
  
  <p>When i try to request /api/test with a link in my app for exemple i get a generic error, the link and google did not help much :(</p>
  
  <pre><code>[HPM] Error occurred while trying to proxy request /api/test from localhost to back:8080 (EINVAL) (https://nodejs.org/api/errors.html#errors_common_system_errors)
  </code></pre>
  
  <p>I suspect some weird thing because the proxy is on the container and the request is on localhost but I don't really have an idea to solve this.</p>