Felippe Regazio

Posted on Jan 9, 2019 • Edited on May 7, 2020

A complete "Live Reload" feature for PHP projects in a single class

#php #webdev #showdev #opensource

WARNING:This project has changed A LOT since the publication date of this post. It still offers a hot reload feature in a single class, but now with a SSE (Server-Sent Events) approach. Take a look on the github docs to further information

Recently i made this PHP class to use in my personal projects and in the company which i work for. I really enjoy the Vue (and other frameworks) Hot Reload capabilities and i became kinda badly accustomed with this new features, so i wrote this class to add a live reload feature to any php project in a very simple way. It allows you to see your page dinamically changing while coding, without have to keep refreshing the browser on every change. By default, the script will turn your project tab reactive to changes in included/required files, css and js files releated to the tab opened. Every browser, every project, one single file.

The use is really simple: You must call the HotReloader on the sources you want to auto-react to changes. The reactions will happen on js, css, and other php files related to current page. You must have a layout file, common footer or something like this in your boilerplate. If dont, you'll need to put the HotReloader() in your code manually. The examples here must be putted on your footer section or somewhere after your <body> tag.

The simplest way to start is: require the class, instantiate it, call the init method. Now, keep the page opened while coding, and just code.

require "../hotreloader.php";
$reloader = new HotReloader();
$reloader->init();

You can change, expand and adapt this default behavior, and you can configure the class to a better experience in according to your needings. Different from other live reloaders i have seen in php, by default this will not assist your entire directory, but only files related to your current page. I have using this class in huge projects and inside frameworks as Cake Php, and its behavior its been really acceptable and lightweight. The project is a BETA version, to download or read the documentation, please see the Github page. Contributors are really wellcome ;)

https://github.com/felippe-regazio/php-hot-reloader

Hope you enjoy!

Top comments (10)

Felippe Regazio • Jan 14 '19 • Edited

Hello Ankush Thakur, thank you for your comment. How this class works:

I think will be a difficult thing to add the Reloader to cli and daemon applications cause it uses a peace of Javascript as Watcher. But i either can se workarounds to this problem.

The current page is any page that call the hotReloader init() method.
Every page will be treated as a single instance for the reloader.
The reloader will then (by default) collect all files related to the page which called it.
The information collected will be:

included files
css and js files (link and script elements)
paths or files added by add() method on the reloader

With this files in hand the reloader will create a md5 hash that will be your current state.
In parallel, the reloader will add a JS script on your page which will assist changes every 1 sec.

If the hash change, a reload will be triggered.
If the css change, it will be replaced on the fly
If a js change, a reload will be triggered

If you have 3 tabs opened and change a file which is related to only one, only this tab will reload. If you change a file which is related to all tabs, than all tabs will reload.

I have been using this class in many projects and i think is stable for while. I tested it with pure php projects and with some frameworks (laravel and cake) and all done well. I added the class to the framework, and added an instance on a "layout" file, so every page inherits the hot reload capabilities.

You can check the sources or documentation on git for details about how it works, and the possible options. There is a simple example on sources too.

Here is the "How it Works" documentation section, i believe will clarify your question:

"This class is divided in two parts: PHP and the Javascript part. The php part will build a list of all files related to your current code (which calls the reloader) and use the datetime or md5_file to create a unique application checksum, this will be the current state of your code. This class adds this checksum (hash) on the headers Etag field of every request. The javascript part keep watching your application headers, scripts and link tags every 1 sec. When something has changed (the etag checksum or any tag related file), the JS will perceive the diff and will reload the page. Of course, many features are included like the ignore lists, watcher increment, error handling, etc. To know more about, please read the source code self documentation on hotreloader.php file".

Any suggestion or doubts, please tell me ; )

José Espinoza • Mar 4 '20

Hi Felippe, excellent tool. I'm trying to use it with a simple project I'm doing but I don't get it to work. I have my index.php file where I include index.view.php where I have the UI, I have add the function of the example and it only reload when I change the index.php and the index.view.php but I also aggregate a scss file to add function. Can you tell me if I'm doing something wrong

<?php

include_once 'index.view.php';

require "hot-reloader.php";
use HotReloader\HotReloader;
$reloader = new HotReloader();
$reloader->setRoot(__DIR__);
echo "Directorio: " . __DIR__;
$reloader->add([
    "index.php",
    "index.view.php",
    "css-scss/styles.scss"
]);
$reloader->init();

Here is my code, I will appreciate your help very much

Felippe Regazio • Mar 5 '20

Hey José, thks for your comment!
An update release of this project is available now (to tell your the truth i just commited it 5 min ago).
Can you please go to the repository and update the version are your running to the new version, please? Also let me know the results.

Adson Silva Cicilioti • Apr 3 '22

Felippe, is possible use on WordPress Theme/Plugin development?

Adson Silva Cicilioti • Apr 3 '22

Wouldn't the right thing be to watch the final css?

Gökhan Çelebi • Feb 23 '21

Awesome ! Thank you!

Tochukwu Ojinaka • Jun 18 '20

Thanks a lot, really happy i found this article, i am really curious on how you achieved this

Felippe Regazio • Jun 22 '20

Hello Tochukwu!

As the Warn said, this project has changed a lot. Nowadays it uses Server Sent Events API and a simple differ algorithm, also has capabilities to integrate with Git.

The ideia is, i open an SSE server with PHP, this server checks the files you said to watch and tells to the client if some o them changed.

O the client side a JS function will connect to this SSE Server and receive a messaging telling to reload the page when a change is tracked.

Alternatively, you can integrate with git, so everytime a file enters to your "modified files" on your git tree, it passes to be automatically watched by the Reloader.