Call + (44) 0843 289 4539

How to run PHP Server with BrowserSync and Gulp

Over on my personal blog, I wrote an article 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.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 a index.php or index.html in the directory being served. You can open your browser and navigate to https://localhost:8080 and see 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

hello-world

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

hello-world-web

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.

hello-world-2



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!

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 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.

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

We need to create a 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.

 

Follow Me

Gary Woodfine

Helps businesses by improving their technical proficiencies and eliminating waste from the software development pipelines.

A unique background as business owner, marketing, software development and business development ensures that he can offer the optimum business consultancy services across a wide spectrum of business challenges.
Follow Me
%d bloggers like this: