Local development with hot reload

[jeromegamez]

Hey there 👋🏻,

I'm currently tinkering with Framework X and was wondering if there was a better way than stopping and re-running php public/index.php each time I made a change.

I tried 3rd party tools like entr but didn't get it to work properly, so I asked myself if I couldn't do it with ReactPHP.

I came up with this (hopefully simple and certainly flawed) file/directory watcher using reactphp/child-process:

• 2022-01-09 14:51: Script updated to handle Signals

#!/usr/bin/env php
<?php

require __DIR__ . '/../vendor/autoload.php';

use React\ChildProcess\Process;
use React\EventLoop\Loop;

$hash = '';

$processes = [
    $server = new Process('bin/serve'),
    $watcher = new Process('find lib public src templates -ls'),
];

Loop::addSignal(SIGINT, function($signal) use ($processes) {
    foreach ($processes as $process) {
        $command = $process->getCommand();

        echo "Stopping `$command` ";
        foreach ($process->pipes as $pipe) {
            $pipe->close();
            echo '.';
        }

        $process->terminate($signal);
        echo ' DONE'.PHP_EOL;
    }

    Loop::stop();
});

Loop::addPeriodicTimer(0.1, function() use (&$hash, $watcher, $server) {
    $watcher->start();
    assert($watcher->stdout !== null);

    if (!$server->isRunning()) {
        if ($hash === '') {
            echo 'Starting development server' . PHP_EOL;
        }

        $server->start();
        assert($server->stdout !== null);

        $server->stdout->on('data', function($chunk) {
            if (str_contains($chunk, 'Received SIGTERM')) {
                echo 'Change detected, restarting development server…' . PHP_EOL;
                return;
            }

            echo $chunk;
        });
    }

    $watcher->stdout->on('data', function($chunk) use (&$hash, $server) {
        $newHash = md5($chunk);

        if ($newHash === $hash) {
            return;
        }

        $hash = $newHash;

        if ($server->isRunning()) {
            $server->terminate();
        }
    });
});

If stored the script as bin/develop (and chmod +xed it), so I can run it with bin/develop when I start working and don't have to keep an eye on it.

You can probably imagine how it works but here's a demo anyway:

hot-reload-demo.mp4

Perhaps it can be useful to someone else, and I'm very much looking forward to your feedback and suggestions 🙏🏻

[jeromegamez]

After having worked with this for a few days I can say it makes things a little less cumbersome but it's far from perfect.

For example: if I close the terminal window before stopping the script first, the processes keep running; when I restart the watcher in a new window, it fails with telling me that the ports are already occupied.

I will update the code snippet as I try to make it better, and if you notice something that could/should be made better, please do let me know ^^.

[SimonFrings]

Hey @jeromegamez, thank you for sharing, always love to see what you come up with ❤️

After having worked with this for a few days I can say it makes things a little less cumbersome but it's far from perfect.

I agree, there are a lot of processes starting/running and you don't know about the actual contents of $chunk in different cases which could lead to some unwanted behavior, but I think it's a first solution for #86. Additionally our implementation of signal handling (#150) currently kills the the process hard which could lead to some unfinished operations.

The reload feature should be part of Framework X at some point in the future and should just work, but until then I think this can be useful 👍

[jeromegamez]

Uh, I didn't see that discussion, now I'm a little bit embarrassed that I didn't search (I'd like to say throughly, but I didn't even scroll) 😅.

Thank you for your feedback!

[jeromegamez]

I updated my script to handle signals and updated the original script:

$processes = [
    $server = new Process('bin/serve'),
    $watcher = new Process('find lib public src templates -ls'),
];

Loop::addSignal(SIGINT, function($signal) use ($processes) {
    foreach ($processes as $process) {
        $command = $process->getCommand();

        echo "Stopping `$command` ";
        foreach ($process->pipes as $pipe) {
            $pipe->close();
            echo '.';
        }

        $process->terminate($signal);
        echo ' DONE'.PHP_EOL;
    }

    Loop::stop();
});

[…] you don't know about the actual contents of $chunk in different cases which could lead to some unwanted behavior […]

I was under the assumption that $server->stdout would only contain the server messages, and $watcher->stdout only the output of the find command. Isn't that so? (not meant as a rhetorical question 😅 )

---

What this still doesn't handle is when one closes the terminal window without stopping the watcher first, and I haven't even thought about Windows.