Wordpress redirecting to localhost instead of virtual host when being proxied by Webpack Dev Server - apache

Question

I am trying to do a relatively simple set up with:
An Apache server with a virtual host for the HTML.
Webpack and the Webpack Dev Server for asset reloading and generation.
To accomplish this, the Webpack Dev Server proxies the other server to pass through requests that it doesn't know how to handle.
Using a basic python server (which works):
Start the python webserver on http://localhost:5000.
Run npm start.
Webpack Dev Server starts and proxies the python server using http://localhost:9090.
Visit http://localhost:9090 and see HTML result of python server plus Webpack assets.
Using Apache server:
Start the Apache server.
Run npm start.
Webpack dev server starts and proxies the Apache server using http://localhost:9090.
Visit localhost:9090 the browser automatically redirects to http://localhost and displays "It works!".
If I separately visit http://vhost.name in the browser I see the correct HTML. My environment is the default Apache Server version: Apache/2.4.16 (Unix) on Mac OSX El Capitan.
package.json
"scripts": {
"test": "node server.js",
"start": "npm run start-dev-server",
"start-dev-server": "webpack-dev-server 'webpack-dev-server/client?/' --host 0.0.0.0 --port 9090 --progress --colors",
"build": "webpack"
},
webpack.config.js
/*global require module __dirname*/
var webpack = require('webpack');
module.exports = {
entry: {
app: [
'webpack-dev-server/client?http://localhost:9090',
'webpack/hot/only-dev-server',
'./src/app.js'
]
},
output: {
path: __dirname + '/dist',
filename: '[name]_bundle.js',
publicPath: 'http://localhost:9090/dist'
},
devServer: {
historyApiFallback: true,
proxy: {
// Python server: works as expected at localhost:9090
// '*': 'http://localhost:5000'
// Apache virtual host: redirects to localhost instead of
// serving localhost:9090
'*': 'http://vhost.name'
}
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
httpd-vhosts.conf
<VirtualHost vhost.name:80>
DocumentRoot "/Path/To/vhost.name"
ServerName vhost.name
<Directory "/Path/To/vhost.name">
Options FollowSymLinks Indexes MultiViews
AllowOverride All
# OSX 10.10 / Apache 2.4
Require all granted
</Directory>
</VirtualHost>
hosts
127.0.0.1 localhost
127.0.0.1 vhost.name

Answer 1

Wordpress uses canonical URLs to help normalize URLs for content from different sources:
[Y]ou can’t control who links to you, and third parties can make errors when typing or copy-pasting your URLs. This canonical URL degeneration has a way of propogating. That is, Site A links to your site using a non-canonical URL. Then Site B see’s Site A’s link, and copy-pastes it into their blog. If you allow a non-canonical URL to stay in the address bar, people will use it. That usage is detrimental to your search engine ranking, and damages the web of links that makes up the Web. By redirecting to the canonical URL, we can help stop these errors from propagating, and at least generate 301 redirects for the errors that people may make when linking to your blog.
This rewriting is what strips the Webpack-dev-server port number when attempting to proxy. The solution is to add in your theme/functions.php:
remove_filter('template_redirect', 'redirect_canonical');
We obviously don't want this running on the live site, so add a variable to the wp_config.php to set depending on environment:
wp-config.php
// Toggle to disable canonical URLs to allow port numbers.
// Required for Webpack-dev-server proxying.
define('DISABLE_CANONICAL', 'Y', true);
yourtheme/functions.php
// Hack for Webpack dev server
if (DISABLE_CANONICAL == 'Y') {
remove_filter('template_redirect', 'redirect_canonical');
}
I have experienced issues with the browser "caching" the previous URL redirect, so when you make a change it may not appear immediately. Try opening the URL in incognito mode, using a different browser, or restarting the Webpack and Apache servers.