Laravel live reloading without any js stuff
Do you know that we can implement live reload in Laravel without any npm package? No
no nodejs, just
How live reloading works
And in the browser, somehow it needs to listen to the WebSocket server, and reload the browser when the server told it to do.
Finally, we also need file watchers, it watches the files changing when we edit the project, then asks the WebSocket server to send a command to the WebSocket client in the browser force him to reload the URL.
Laravel package implementation
My purpose is to integrate it into the
php artisan serve command, I think it's convenient and simple to use.
So I overwrote the ServeCommand class. This command now spawns 2 processes:
- The default
artisan servefrom laravel, which now become
- The WebSocket server
The customization magic actually comes from
server:websockets command. It's also spawned a file watcher, which watches files changing every 500ms and triggers the reload command to the WebSocket server, then sent to all the listener clients.
And the file watcher also does a stupid task is writing a cache parameter
Cache::put('serve_websockets_running', true, 5);
This can help us detect is that the WebSocket server is running or not. I think 5 seconds is ok. So we can inject the script to the HTML response via laravel middleware. Just put it at the very beginning of HTML response, doesn't look good but it works.
public function injectScripts($content)
$content = (string) view('serve_livereload::script', [
'host' => '127.0.0.1',
'port' => ServeWebSocketsCommand::port(),
And this is laravel-server-livereload package. Thank you for reading my explanation.