CODEWITHSUNDEEP
phpgeneratoryeomanbrowser-sync
scottrod
scottrod

Reputation: 587

Setting up Yeoman Webapp with PHP

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

Upvotes: 1

Views: 593

Answers (1)

scottrod
scottrod

Reputation: 587

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']);
});

Upvotes: 3

Related Questions