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 -------------------------------------