Setting up Yeoman Webapp with PHP - php

Question

Trying to set up yo webapp to use a PHP server instead of HTML.
I tried following this answer by example with no success.
Gulp-webapp running BrowserSync and PHP
I added gulp-connect-php to my project.
// Towards the top of my gulpfile, added:
const connect = require('gulp-connect-php');
// Added the following task below:
gulp.task('php-serve', ['styles', 'fonts'], function () {
connect.server({
port: 9001,
base: 'app',
open: false
});
var proxy = httpProxy.createProxyServer({});
browserSync({
notify: false,
port : 9000,
server: {
baseDir : ['.tmp', 'app'],
routes : {
'/bower_components': 'bower_components'
},
middleware: function (req, res, next) {
var url = req.url;
if (!url.match(/^\/(styles|fonts|bower_components)\//)) {
proxy.web(req, res, { target: 'http://127.0.0.1:9001' });
} else {
next();
}
}
}
});
// watch for changes
gulp.watch([
'app/*.html',
'app/*.php',
'app/scripts/**/*.js',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});
Ran gulp php-serve
PHP 5.5.36 Development Server started [etc…]
Listening on http://127.0.0.1:9001
However, not without error:
ReferenceError: httpProxy is not defined
How can this be resolved? I wouldn't even mind using MAMP which I already have running on port 8888

Answer 1

It seems I missed a vital part of installing http-proxy, which I thought I had installed before.
Here's an idiot guide of getting PHP to work with the most popular yeoman generator, generator webapp, with big thanks to TobyG
Install http-proxy
npm install http-proxy --save
Install gulp-connect-php
npm install --save-dev gulp-connect-php
Add these two functions to the top of gulpfile.js
const connect = require('gulp-connect-php');
const httpProxy = require('http-proxy');
Add this additional task to gulpfile.js
gulp.task('php-serve', ['styles', 'fonts'], function () {
connect.server({
port: 9001,
base: 'app',
open: false
});
var proxy = httpProxy.createProxyServer({});
browserSync({
notify: false,
port : 9000,
server: {
baseDir : ['.tmp', 'app'],
routes : {
'/bower_components': 'bower_components'
},
middleware: function (req, res, next) {
var url = req.url;
if (!url.match(/^\/(styles|fonts|bower_components)\//)) {
proxy.web(req, res, { target: 'http://127.0.0.1:9001' });
} else {
next();
}
}
}
});
// watch for changes
gulp.watch([
'app/*.html',
'app/*.php',
'app/scripts/**/*.js',
'app/images/**/*',
'.tmp/fonts/**/*'
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});