9

I would like to use Browsersync with PHP, but I can't seem to get it to work properly.

Currently I am using Gulp. Is it possible to either use Browsersync with XAMPP/MAMP, or use a Gulp plugin to read .php files?

David Refoua
  • 3,476
  • 3
  • 31
  • 55
dr_fluff
  • 123
  • 1
  • 1
  • 7
  • It can be done with Gulp. Check [**this answer**](http://stackoverflow.com/questions/27990781/gulp-webapp-running-browsersync-and-php). Please remember to search for similar questions before opening a new question of your own. I'd also recommend checking [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask), and taking the [**tour**](http://stackoverflow.com/tour) of the site :) – Obsidian Age Mar 19 '17 at 21:37

3 Answers3

5

use gulp-connect-php

npm install --save-dev gulp-connect-php

then setup you gulpfile.js

var gulp = require('gulp'),
    connect = require('gulp-connect-php'),
    browserSync = require('browser-sync');

gulp.task('connect-sync', function() {
  connect.server({}, function (){
   browserSync({
     proxy: '127.0.0.1:8000'
       });
    });

    gulp.watch('**/*.php').on('change', function () {
      browserSync.reload();
    });
});

see documentation https://www.npmjs.com/package/gulp-connect-php

Also there is a good tutorial here https://phpocean.com/tutorials/front-end/automate-your-workflow-with-gulp-part-3-live-reloading/23

Ivan of uganda
  • 382
  • 5
  • 15
  • 1
    The tutorial you link to is for gulp 3, which will break when combined with gulp 4. The current stable version. Still looking for a good v4 tutorial for gulp-connect-php combined with other handy gulp options. As the wrong port and base dir are served in my case... – AndrewRMillar Apr 27 '19 at 07:40
4

I have the same situation for a few days until I figure out that it happens because I didn't close my html output properly. BrowserSync needs to include some javascript text before to reload the browser. If the html, body tags are NOT closed or NOT present, BrowserSync has nowhere to include the script.

Yeah.not
  • 189
  • 1
  • 8
0

A proxy option is now available in browser-sync when using an external server.

Config docs : https://browsersync.io/docs/options#option-proxy

// Using a vhost-based url
proxy: "local.dev"

// Using a localhost address with a port
proxy: "localhost:8888"

// Using localhost sub directories
proxy: "localhost/site1"

Command line : https://browsersync.io/docs/command-line#start

browser-sync start --proxy "localhost:8080" --files "**/*"
jhoffman
  • 144
  • 1
  • 4