Use Basecamp’s Hotwire in Laravel
Published on by Paul Redmond
Turbo Laravel is a package that gives you a set of conventions to get the most out of Hotwire in Laravel. Turbo is inspired by the turbo-rails gem, giving Laravel developers a similar experience as those developing with Hotwire in the Ruby world.
Hotwire is an open-source tool built by Basecamp (it powers the HEY email service), which provides an alternative approach to building modern web applications without using much JavaScript and sending HTML instead of JSON over the wire.
Turbo Laravel supports Turbo features outlined by the Hotwire documentation. For those new to Hotwire, here are the descriptions of each technique from the website:
- Turbo Drive – accelerates links and form submissions by negating the need for full page reloads.
- Turbo Frames – decompose pages into independent contexts, which scope navigation and can be lazily loaded.
- Turbo Streams – deliver page changes over WebSocket, SSE or in response to form submissions using just HTML and a set of CRUD-like actions.
- Turbo Native – lets your majestic monolith form the center of your native iOS and Android apps, with seamless transitions between the web and native sections.
Along with this package, there is a turbo-laravel-test-helpers companion package that adds a couple of macros and assertion helpers to test your applications built with Turbo Laravel:
/** @test */public function turbo_stream_test(){ $response = $this->turbo()->post('my-route'); $response->assertTurboStream(); // Checks if one of the Turbo Stream responses matches these criteria. $response->assertHasTurboStream($target = 'users', $action = 'append'); // Checks if there is no Turbo Stream tag for the criteria. $response->assertDoesntHaveTurboStream($target = 'empty_users', $action = 'remove');}
Learn More
To understand how to use Laravel Turbo, you’ll need to familiarize yourself with the underlying documentation. The Turbo Handbook is probably the best resource to get started.
You can learn more about the Turbo Laravel package, get full installation instructions, and view the source code on GitHub.