Clever Geek Handbook

Redirect WordPress to siteurl when accessed via webpack-dev-server proxy

This question has historical value, so I am updating it a bit. This is the best result for "redirecting wordpress webpack-dev-server" on google. While the accepted solution works for Webpack 2, it may not work anymore. If not, you can refer to my wordpress-theme-base repository which is built using Webpack 4.

First of all, it has to do with Wordpress redirection to localhost instead of virtual host when proxied via Webpack Dev Server . I am facing a similar problem, but the only solution did nothing for me.

I am using WordPress 4.7 on a Vagrant development machine and it responds to http: //wordpress.local just like it should. Earlier, I used Browsersync to view their files and start the update, and it works as expected: browser-sync start --proxy 'https://wordpress.local' --files '**/dist/js/*.js, **/*.css, **/*.php'

.

However, with webpack-dev-server, I cannot replicate the behavior. This is what should happen.

  1. The server starts at https://localhost:9000

  2. Navigating to https://localhost:9000

    should give me the same page as https://wordpress.local

    to https://wordpress.local

    , without any redirects. The site works the same as it did https://wordpress.local

    , but the url https://localhost:9000

    .
  3. Changes occur, the page is reloaded.

Instead, it happens.

  • Going to https://localhost:9000

    redirects me to https://wordpress.local

    from 301. I have disabled canonical redirects with remove_filter('template_redirect', 'redirect_canonical');

    but it doesn't help
  • https://localhost:9000/404

    to https://localhost:9000/404

    presents me with a 404 page provided by my theme. No redirection occurs.
  • Going to https://localhost:9000/existing-page/

    redirects me to https://localhost/existing-page/

    301.

What's going on on earth? I narrowed it down to WordPress, since proxying a non-WordPress directory works as expected:

Direct, $ _SERVER content: https://gist.github.com/k1sul1/0aff7ba905464ca7852f2ce00b459922

Proxy, $ _SERVER content: https://gist.github.com/k1sul1/f090aa103dc3a3cb0b339269560ac19d

I tried to play around with titles and the like, but no luck. This is how my webpack.config.js looks like:

const path = require('path');
const url = 'https://wordpress.local/';
const themeDir = '/wp-content/themes/themename/';

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: url
  },
  devServer: {
    historyApiFallback: true,
    compress: true,
    port: 9000,
    https: url.indexOf('https') > -1 ? true : false,
    publicPath: themeDir,
    proxy: {
      '*': {
        'target': url,
        'secure': false
      },
      // '/': { // This doesn't do much. 
        // target: url,
        // secure: false
      // }
    },
  }
};

TL; DR: How do I replicate Browsersync behavior with webpack-dev-server without crazy WordPress?

+4


source to share


2 answers


I finally solved it. The magic lines that go into the proxy configuration are changeOrigin: true

and autoRewrite: true

. These parameters are included in the http-proxy-middleware .

Any changes to the domain or WordPress configuration are unnecessary.

const path = require('path');
const pjson = require(path.join(__dirname, '..', 'package.json'));

const isWin = /^win/.test(process.platform);
const isMac = /^darwin/.test(process.platform);
const isHTTPS = pjson.wptheme.proxyURL.includes('https');

exports.devServer = ({ host, port } = {}) => {
  const options = {
    host: host || process.env.HOST || 'localhost', 
    port: port || process.env.PORT || 8080,
  };
  options.publicPath = (isHTTPS ? 'https' : 'http') + '://' + options.host + ':' + options.port + pjson.wptheme.publicPath;

  return {
    devServer: {
      watchOptions: {
        poll: isWin || isMac ? undefined : 1000,
        aggregateTimeout: 300,
      },

      https: isHTTPS,
      stats: 'errors-only',
      host: options.host,
      port: options.port,
      overlay: {
        errors: true,
        warnings: false,
      },

      open: true,
      hotOnly: true,

      proxy: {
        '/': {
          target: pjson.wptheme.proxyURL,
          secure: false,
          changeOrigin: true,
          autoRewrite: true,
          headers: {
            'X-ProxiedBy-Webpack': true,
          },
        },
      },

      publicPath: options.publicPath,
    },
  };
};


The values ​​related to package.json are as follows:

"wptheme": {
  "publicPath": "/wp-content/themes/themefolder/dist/",
  "proxyURL": "https://wordpress.local"
},
+4


source


Perhaps these are the redirection settings of your Wordpress site. If you visit your site via http: // localhost: 9000 , then this should be the domain that Wordpress knows about.

Set it in the Wordpress admin or directly in the database:



UPDATE `wp_options` SET `option_value` = "http://localhost:9000" WHERE `option_name` = "siteurl" OR `option_name` = "home";
+2


source






More articles:


All Articles