Puma and webpack proxy aren't playing nicely, here's how you fix it

28 Sep 2016

Today I started a new experiment. I am going to be live-coding some of the many
things I do in my day to day work.

I will blog soon on the reasons for doing this.

During the coding session I encountered a problem where webpack dev proxy is
not working with the puma rack server.

I created a mini go based HTTP server and I verified that this is actually
working for another server first, that’s how I isolated that it’s actually puma
related and not something in webpack or my configuration.

Here’s a sample of the configuration, just for reference:

  devServer: {
    contentBase: './dist',
    hot: true,
    historyApiFallback: true,
    proxy: {
      "/api": {
        target: 'http://localhost:3000'
      }
    }
  }

Turns out with the puma web server this will fail since puma will not bind to
127.0.0.1 and the webpack proxy is likely resolving localhost to 127.0.0.1.

In order to fix this, when you run your rails server, just run it with the -b
option to bind it to 127.0.0.1 like so: rails server -b 127.0.0.1.

That’s it, now you can enjoy working with webpack and puma as your rails-api
rack server.