Webpack proxy w/ Wordpress not redirecting GET requests inside page

Question

I'm trying to create a Wordpress theme development environment (more precisely migrating from gulp w/ browser-sync to webpack). Therefore I've set up a proxy pointing to my wordpress installation (also locally). When I access the webpack dev server in the browser the proxy seems to be working fine. For instance localhost:8080/sample-page shows the WordPress page localhost:8000/sample-page.

The problem is, that any links inside that page will point back to the original port. When I use the navigation on the page I get redirected back to localhost:8000/*.

With gulp, I only had to create the browser-sync task with one option being the target URL and it worked perfectly:

browserSync.init({
  proxy: pjson.themeURL || "localhost:8000",
  open: false
});

I have tried to change different options of the HTTP-proxy-middleware, currently, I got the following config (I also tried options like an auto rewrite, etc.):

  devServer: {
    publicPath: `${options.publicPath}/build/`,
    proxy: {
      "*": {
        target: pjson.proxyURL || "http://localhost:8000",
        logLevel: "debug",
        secure: false,
        changeOrigin: true
      }
    }
  },

The publicPath will resolve to /wp-content/themes/theme-name/build/ (I also tried including the whole url not just the path)

I hope I can get it to run just like the browser-sync proxy did. Maybe I need to set some headers?

I appreciate all the help!

EDIT:

I have found the following code from the browser-sync source which seems to have a method responsible for replacing all the links inside the page: https://github.com/BrowserSync/browser-sync/blob/master/packages/browser-sync/lib/server/proxy-utils.js

The Dev server seems to have the possibility to modify a request with the onProxyRes hook where I could do something like modifiying all the links, I just didn't have the time yet to try it out, so I now using browser-sync atm.

score 0 · Answer 1 · answered Jul 16 '19 at 07:02

I've not found a solution yet, my current workaround is to use webpack -watch and browser-sync without webpack-dev-server, this way hot reloading won't work though :/

My webpack config plugins look currently like this:

  plugins: [
    new BrowserSyncPlugin({
      port: pjson.themeConf.port || 3000,
      proxy: pjson.themeConf.proxyURL || "localhost:8000",
      files: ["**.php"]
    }),
    new MiniCssExtractPlugin({})
  ],

Webpack proxy w/ Wordpress not redirecting GET requests inside page

1 Answers1