How to run PHP Server with BrowserSync and Gulp

I wrote about using gulp to automate the boring stuff,Â in which provided instructions on how developers can automate a lot of the low-value tasks they need to perform during the development process.

In this post, I thought I would build on that example and provide instructions on how to run PHP Server with BrowserSync and Gulp to not only run a Front-end development website, so I can do JavaScript development, but also start up a PHP web server, and monitor files for any changes, if there are restart the server so we can see the effect those changes have in real time.

Since the release of PHP 5.4, developers have been able to run an on-demand web server - web server was designed to aid application development.

Warning

The Built-in web server may also be useful for testing purposes or for application demonstrations that are run in controlled environments.

It is not intended to be a full-featured web server.

Having a built-in web server for PHP is extremely convenient when developing PHP applications for a few reasons:

No need to install and manage web servers on your local machine. Which in some cases can lead to unnecessary memory usage, and as I have experienced in the past while having Apache installed on my machine unexplainable occasional system crashes due to memory leaks.
No need to install any additional third-party tools on your local machine

How to use PHP Web Server

The PHP is a really convenient piece of functionality and relatively simple to use. There are a few basic commands you need to know and remember and after a while, it all becomes second nature.

Starting a server

To start the web server simply open a terminal window navigate to your project folder and use the command format.php -S [server address and port]..

This will treat your current working directory as the document root directory and if a request does not specify a file then it will default to either an index.php or index.html in the directory being served.

Open your browser and navigate to https://localhost:8080 and inspect the site.

php -S localhost:8080

Specifying a document root directory

If you would like to start the web server in any other directory you can use the-t and specify a directory path.

php -S localhost:8080 -t ./code/hello-world-php

Using a router file

In a more complex scenario you may use a third party router to serve the request. You can do so by providing the path to a router file.

php -S localhost:8080 some-router.php

Using PHP Web server in development

let's walk through a typical development use case scenario.We could develop a quick application with basic Hello World! functionality.

First, let's create a file and name itindex.php and add the following code.

<htm>
<body>

<?php echo "<h1> Hello World! </h1>"
?>

</body>
</html>

Now we can just open a terminal window, change into the directory we have saved the file too and execute the following in the terminal window.

php -S localhost:8085

We should see confirmation that our web server is running and if we browse to website on http://localhost:8085 we will see our webpage

Our webpage in all it's glory should look as follows.

If we leave the website running, go and edit index.php code, to add an additional line and save the file.

<html>
<body>

<?php echo "<h1> Hello World! </h1>"
?>

<?php echo "<h1> Hello World 2 </h1>"
?>

</body>

</html>

We will now need to refresh our browser and see our changes take effect.

Run PHP Server with BrowserSync and Gulp

The above scenario is great. However, it does require the developer to preform a few additional tedious steps everytime they make a change. What we really want is view our changes as we're making them, like we can using BrowserSync which is common amongst node and JavaScript front-end frameworks.

I predominantly use Gulp as my Task Runner, based only on my particular preference on the syntax usage!

To continue building on the code from using Gulp to automate the boring stuff . However, it is really easy to get started wtih a new project. We just need initialise the project with Node Package Manager, so we can install some development dependencies.

The good news, this is possible using Gulp due to great Open Source library gulp-connect-php, which is essentially the Gulp version of the Grunt version of grunt-php .

To do this, just use npm init then answer the questions as you go through.

Once this is complete we need to add the development dependencies.

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

Warning

The instructions and code presented here are based on Gulp 3.X

On December 10, 2018,Â Gulp.js 4.0 was announced as the defaultÂ andÂ published to npm. Anyone usingÂ npm install gulp on a new project will receive version 4.

There are some breaking changes between version 3 and 4 of Gulp so somethings may not work as expected

# To install version 3.9.1 of gulp you can use
npm install gulp@3.9.1  --save-dev

We need to create a gruntfile.js

touch gruntfile.js

touch gruntfile.js

we also need to add gulp-connect-php as a development dependency to our project.

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

then import the references to our gulpfile.js

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

We can now add a task which actually configures our server.

gulp.task('php', function(){
    php.server({base:'./', port:8010, keepalive:true});
});

We can then inject this task into our browserSync task we will create

gulp.task('browserSync',['php'], function() {
    browserSync.init({
        proxy:"localhost:8010",
        baseDir: "./",
        open:true,
        notify:false

    });
  });

We can now create a dev task to watch all files with .php extension, so if any changes are made the browser is refreshed.

gulp.task('dev', [ 'browserSync'], function() {
       gulp.watch('./*.php', browserSync.reload);
});

Your completed gulpfile.js should resemble

var gulp = require('gulp');
var php = require('gulp-connect-php');

var browserSync = require('browser-sync').create();

gulp.task('php', function(){
    php.server({base:'./', port:8010, keepalive:true});
});

gulp.task('browserSync',['php'], function() {
    browserSync.init({
        proxy:"localhost:8010",
        baseDir: "./",
        open:true,
        notify:false

    });
});

gulp.task('dev', [ 'browserSync'], function() {
       gulp.watch('./*.php', browserSync.reload);
});

Run PHP Server with Gulp task

All the configuration is now completed. You should now be able to go back to your terminal command and call gulp dev and your web site will launch.

Make some changes to your PHP file, i.e.

Add an additional<?php echo "<h1> Hello World 3 </h1>"?> save the file and you'll notice your web page will automatically refresh and your changes are now visible.

Summary

Using this approach simplifies the development process. Making use of both Gulp and PHP web server to run a PHP project enabling the live editing and real time refreshing of your changes as you go.

[contact-form-7 id="60611" title="bottom page sign up"]

About
Latest Posts

Gary Woodfine

Technical Director at threenine.co.uk

Gary is Technical Director at threenine.co.uk, an independent software vendor specialising in IoT, Field Service and associated managed services,enabling customers to be efficient, productive, secure and scale-able.