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 (https://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): https://webcrunch.com/posts/hotwire-comments-rails

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 (https://webcrunch.com), where I publish tutorials, articles, and the occasional vlog about design and development.

📰 Never miss an update! Click here to subscribe: https://www.youtube.com/user/webcrunch?sub_confirmation=1

💻 Read the written version: https://webcrunch.com/posts/hotwire-comments-rails

💎 New to Ruby on Rails? Enroll in my course HELLO RAILS: https://hellorails.io

💻 The Blog (my source of truth): https://webcrunch.com

Additional Links: 🎨 Bring life to Rails projects with Rails UI: https://railsui.com. 👨‍💻 Hire me: Visit: https://railsui.com/custom 🐤 https://twitter.com/webcrunchblog. ⚙️ https://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!

✨ https://github.com/sponsors/justalever ☕️ https://www.buymeacoffee.com/webcrunch ... https://www.youtube.com/watch?v=WSzliaAeRVU