Hotwire Comments with Ruby on Rails

Hotwire is a library that brings real-time functionality to your Rails applications. By integrating Hotwire-enabled comments, you can create a more interactive and immersive experience for your readers. That’s our focus today.
With Hotwire, we can enhance a typical blob comment with Rails in the following ways:
- Enable real-time commenting without page reloads
- Display new comments as they are posted.
- Update comment counts dynamically.
- Enhance user engagement and encourage discussion.
- Delete and edit comments without reloading pages
Hotwire (hotwired.dev) is built on top of Turbo, a library that provides a seamless user experience by minimizing page reloads and optimizing performance. By leveraging Hotwire's features, you can take your Rails blog to the next level and provide a modern, responsive commenting system.
What I hope you'll learn in this tutorial:
This tutorial will guide you through adding Hotwire-enabled comments to a simple Rails blog application. You'll learn how to:
- Create a basic blog with Rails 7.1
- Create a comment model and controller.
- Build a comment form with Hotwire.
- Display and update comments in real time.
*Some prerequisites:*
- A Rails 7 application (Hotwire is compatible with Rails 7 and later)
- Basic knowledge of Rails and JavaScript
Let's get started!
📕 Read the blog post (full tutorial): webcrunch.com/posts/hotwire-c...
Timestamps:
00:00 - What we plan to build
01:02 - rails new hotwire_comments
01:30 - Install Rails UI and configure template to use
04:35 - Scaffolding Models (Post and Comment)
06:50 - Migrate database
07:15 - Establish model relationships
08:11 - Add simple model validations
10:00 - Update config/routes.rb
11:10 - PostsController logic
12:52 - Initialize new comment on posts show action
14:17 - Generate comments controller
15:25 - Update routes again
16:57 - Add comment form to posts show page
21:00 - Comments controller logic
26:00 - Update view to display comment list
27:58 - Transitioning to Hotwire comments
33:09 - Respond with turbo_streams
34:00 - Adding turbo_stream actions
40:00 - Real-time editing of comments
42:40 - Update comments controller to add, edit, update, and destroy actions
49:17 - Final demo!
50:11 - I'm making a new FREE Hotwire course!
======
👋 I'm Andy Leverenz, a passionate product designer and developer. I love creating and sharing my knowledge through design, coding, and writing. Join me on my journey by checking out my blog, Web-Crunch (webcrunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.
📰 Never miss an update! Click here to subscribe: ua-cam.com/users/webcrunc...
💻 Read the written version:
webcrunch.com/posts/hotwire-c...
💎 New to Ruby on Rails? Enroll in my course HELLO RAILS:
hellorails.io
💻 The Blog (my source of truth): webcrunch.com
Additional Links:
🎨 Bring life to Rails projects with Rails UI: railsui.com.
👨‍💻 Hire me: Visit: railsui.com/custom
🐤 / webcrunchblog .
⚙️ github.com/justalever.
P.S. This stuff takes a long time to make but I love to do it. To help me keep at it consider supporting me. If not monetarily, subscribe to the channel or share it with someone!
✨ github.com/sponsors/justalever
☕️ www.buymeacoffee.com/webcrunch

[@ernepazzo1212]

Muchas gracias!!! Más Ruby on Rails y mucho menos JS. Estaremos al pendiente, saludos desde #Cuba.

[@tkhobbes]

There are good chrome extensions for debugging!

[@andyhemphill]

Thanks heaps !!

[@tofuman9526]

Is it possible to just use Inertia instead of the whole rails turbo, etc?

[@Webcrunch]

You can now! There's a new adapter github.com/inertiajs/inertia-rails

[@ddd2283]

Not working from scratch. It wants yanr/esbuild and other JS shit.

[@Webcrunch]

You might check your current node version and make sure it's current.