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.

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.

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.

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.

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.

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.

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.

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.

We need to create a gruntfile.js

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

then import the references  to our gulpfile.js

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

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

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

Your completed gulpfile.js should resemble

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.