I’m using gulp4 to proxy a local WordPress installation with browsersync and gulp-connect-php. My Apache and database are being run with xampp. The project is located in a folder on my desktop, not the in xamp\htdocs\dev folder
When I run gulp the WordPress proxy spins up and can be accessed by launching a browser to: http://localhost:3000/
From there I can log in to the WordPress admin at: http://localhost:3000/wp-admin
I am then redirected to the WordPress dashboard: http://localhost:3000/wp-admin
From the dashboard any links I click from the left hand menu strip “wp-admin” from the URL, thus not finding the desired page. For example, if I were to click “plugins” I’d be directed to http://localhost:3000/plugins.php instead of http://localhost:3000/wp-admin/plugins.php
The port 8001 is what xampp sets php.exe to.
My WordPress siteurl and home are both set to http://localhost:8001 by default upon installation in the database.
gulpfile.js
//establish vars
var gulp = require("gulp"),
sass = require("gulp-sass"),
postcss = require("gulp-postcss"),
autoprefixer = require("autoprefixer"),
cssnano = require("cssnano"),
sourcemaps = require("gulp-sourcemaps"),
connect = require('gulp-connect-php'),
browserSync = require("browser-sync").create(),
imagemin = require('gulp-imagemin'),
concat = require('gulp-concat'),
rename = require("gulp-rename"),
fs = require("fs"),
uglify = require('gulp-uglify-es').default;
//setup the proxy server and browser-sync
connect.server({
base:'./dist',
port:8001,
keepalive:true
});
browserSync.init({
proxy: "localhost:"+8001,
baseDir: "./src",
open: true,
notify: false
});
// Tell gulp which files to watch to trigger the reload
gulp.watch([
'src/**/*.php'
]).on('change', update);
var update = gulp.parallel(
scss,
js,
moveTheme
);
//compress files, move theme to distribution folder, etc
function scss(){...}
function js(){...}
function moveTheme(){...}
Once initialized, gulp logs
[Browsersync] Proxying: http://localhost:8001
[Browsersync] Access URLs:
-------------------------------------
Local: http://localhost:3000
External: http://192.168.1.17:3000
-------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
-------------------------------------