Can't config proxy in configureWebpack

Description

I am following config devServer proxy in vuecli

Steps to reproduce

• Add proxy to webpack config

configureWebpack: {
    devServer: {
      proxy: {
        '/.netlify/functions/**': {
          target: 'http://localhost:9000',
          changeOrigin: true,
          secure: false,
          pathRewrite: {
            '^/\\.netlify/functions': ''
          }
        }
      }
    },
  },

Expected result

Should change host

Actual result

No change host

[kara-todd]

I wasn’t able to get the webpack devServer proxy to work, but I’m not 100% sure how the gridsome internals worked. Since it looks like express is used internally, I used a similar approach to creating a proxy in gatsby. This seemed to resolve the issue for me…

Steps:

1. yarn add -d http-proxy-middleware or npm install http-proxy-middleware --save-dev
2. Create gridsome.server.js in the project root (same directory as gridsome.config.js)
3. Add the following code:

var proxy = require("http-proxy-middleware");

module.exports = function(api) {
  api.configureServer(app => {
    app.use(
      "/.netlify/functions/",
      proxy({
        target: "http://localhost:9001",
        pathRewrite: {
          "/.netlify/functions/": ""
        }
      })
    );
  });
};

I forgot to mention… I start the proxy on 9001 because it looks like something else is running on 9000 … not sure what that is… 😛

[Sergix]

@BobDempsey

The http-proxy-middleware package has since been renamed the proxy method to createProxyMiddleware. You should now import the method like this:

const { createProxyMiddleware } = require('http-proxy-middleware')