PHP

[giovannipds]

Hello guys! First of all, browserSync is awesome, I've used a couple times in some projects that I've started with Yeoman's webapp. Congratulations in all your efforts in this tool, ok? :) thumbs up for you 👍!

Besides that, I'm used to mantain some websites that have been made in PHP, which doesn't have and never had a tool like BrowserSync with them. I'm actually making a project in PHP today and came here to see if there was any tips about configuring BrowserSync with a PHP project, but couldn't found much information about it, at least, the proxy option. Where I am now: I was able to configure my project with the proxy option and a virtual host, and until here, everything seems ok. So I was just wondering, maybe wouldn't it be interesting to put some information about this kind of project here in the recipes?

It'll be cool to hear about other programmers who may be using these technologies yet and already know about the wonderful world of BrowserSync, looking for to have the best of the two worlds.

If this discussion is not in the best spot, please, just let me know.

Regards, Gio.

[shakyShane]

Hi @giovannipds

I think this is a great idea - there's nothing stopping us having recipes for different languages/platforms, in fact I think it would be an excellent addition

[giovannipds]

Hi @shakyShane. I agree. Happy to have a good response from you. PHP is still one of the most widespread languages nowadays.

[Kietil]

Inactive since 8 months ago. Any new movement on PHP recipe/boilerplate for browser-sync?

[giovannipds]

Not mine, but I've been using BrowserSync + PHP through the proxy configuration.

[giovannipds]

Here goes an example of how you can configure a PHP project with Gulp and BrowserSync, if's interesting for someone.

You guys will going to need Node.js + npm + package.json for configuration etc. and a Virtual Host configured for your PHP project (if use Apache, Wamp, XAMPP, etc. you'd probably gonna know that already).

Step 1:
Install the dependencies:

npm install gulp gulp-help browser-sync --save-dev

Step 2:
Create "gulpfile.js" for gulp's configuration, on root, with something like this:

'use strict';

var gulp            = require('gulp-help')(require('gulp'));
var browserSync     = require('browser-sync');
var reload          = browserSync.reload;

/* enable this below if you'd like to store your proxy var name in a config.json
(that's helpful if you're working on a team and need to update a file for each environment): */
// var config      = require('./config.json');

// browsersync 
gulp.task('browser-sync', 'Run browsersync.', function() {
    browserSync({
        ghostMode: false,
        notify: false,

        proxy: 'your-virtual-host-here' // insert your virtual host name here

        // but if you're storing the var name in the config.json, you can do it like so:
        // proxy: config.proxy 

    });
});

// default
gulp.task('default', 'Serves the dev environment (you can add a build task here).', ['serve']);

// serve
gulp.task('serve', 'Serves the dev environment.', ['browser-sync', 'watch']);

// watch
gulp.task('watch', 'Watch the files.', function() {

    // here you config which PHP files browser-sync will be listening to:
    gulp.watch('src/**/*.php').on('change', reload); 

});

/* if you have CSS / SASS / LESS / Stylus / JS / CoffeeScript / whatever,
you can also implement that and watch the files with reload({stream: true}) */

Step 3:
Serve your project dev environment and work on it:

gulp serve

=)