Rails 7.0 demo with Hotwire and Tailwind

A new Rails was released before 2022. This release makes Rails stand out from another framework significantly by getting rid of the most painful issue by replacing NodeJS with Hotwire as a default UI/UX. But still, allow accessing NodeJS with Import map for additional approach.
This article would explain an implementation step-by-step so you can compare it to Rails 6 app more preciously
In this demo, I've forked the original one which uses the important component like the following
  • Hotwire - as UI/UX and JavaScript framework (default)
  • Tailwind CSS - as CSS framework
  • ActionText - as rich text content for text box
  • Pre-requisite
    Recommended version
    rvm: 1.29.12
    ruby: 3.0.3
    rails: 7.0.0
    1) Initial app project
  • Create a new app named 'blog'
  • rails new blog --css tailwind
  • Generate scaffold of the blog post
  • rails g scaffold post title
  • Install ActionText
  • rails action_text:install
  • Migrate Rails DB
  • rails db:create db:migrate
    2) Add Rich Text area
    Add content: as Rich Text Area from ActionText to Model, View, and Controller
    All html.erb files were included classes that will be used by Tailwind CSS
  • Model - Posts
  • # app/models/post.rb
    class Post < ApplicationRecord
      validates :title, presence: true
    
      has_rich_text :content
    end
  • View - Posts Templates
  • <!-- app/views/posts/_form.html.erb -->
    <!-- ... -->
    <!-- add field :content -->
    <div class="my-5">
      <%= form.label :content %>
      <%= form.rich_text_area :content, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
    </div>
    <!-- ... -->
    <!-- app/views/posts/_post.html.erb -->
    <!-- ... -->
    <!-- add field :content -->
     <p class="my-5">
       <%= @post.content %>
     </p>
    <!-- ... -->
    <!-- app/views/posts/show.html.erb -->
    <!-- ... -->
    <!-- add field :content -->
     <p class="my-5 inline-block">
       <%= @post.content %>
     </p>
    <!-- ... -->
  • Controller - Posts
  • # app/controllers/posts_controller.rb
    class PostsController < ApplicationController
    # ...
     private
       def post_params
         params.require(:post).permit(:title, :content) # add content
       end
    end
    3) Apply Turbo Frame to Posts pages
    Clicking New Post will render the new post page into the index page
  • View - Post index page
  • <!-- app/views/posts/index.html.erb -->
    <div class="w-full">
      <div class="flex justify-between items-center">
        <h1 class="text-white text-lg font-bold text-4xl">Posts</h1>
        <%= link_to 'New Post', new_post_path,
          class: "rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium",
          data: { 'turbo-frame': 'new_post' }
        %>
      </div>
    
      <%= turbo_frame_tag :new_post %>
    
      <div class="min-w-full">
        <%= turbo_frame_tag :posts do %>
          <%= render @posts %>
        <% end %>
      </div>
    </div>
  • View - Post new page
  • <!-- app/views/posts/new.html.erb -->
    <%= turbo_frame_tag :new_post do %>
      <div class="w-full bg-white p-4 rounded-md mt-4">
        <h1 class="text-lg font-bold text-4xl">New post</h1>
    
        <%= render "form", post: @post %>
    
        <%= link_to 'Back to posts', posts_path, class: "ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
      </div>
    <% end %>
    4) Apply Turbo Stream on the view
  • Add CRUD into Controller
  • # app/controllers/posts_controller.rb
    class PostsController < ApplicationController
      # ...
      def create
        @post = Post.new(post_params)
    
        respond_to do |format|
          if @post.save
            format.turbo_stream # add format turbo_stream
            format.html { redirect_to posts_path }
            format.json { render :show, status: :created, location: @post }
          else
            format.turbo_stream # add format turbo_stream
            format.html { render posts_path, status: :unprocessable_entity }
            format.json { render json: @post.errors, status: :unprocessable_entity }
          end
        end
      end
    
      def update
        respond_to do |format|
          if @post.update(post_params)
            format.turbo_stream # add format turbo_stream
            format.html { redirect_to posts_path, notice: "Post was successfully updated." }
            format.json { render :show, status: :ok, location: @post }
          else
            format.turbo_stream # add format turbo_stream
            format.html { render posts_path, status: :unprocessable_entity }
            format.json { render json: @post.errors, status: :unprocessable_entity }
          end
        end
      end
    
      def destroy
        @post.destroy
        respond_to do |format|
          format.turbo_stream # add format turbo_stream
          format.html { redirect_to posts_url, notice: "Post was successfully destroyed." }
          format.json { head :no_content }
        end
      end
      # ...
    end
  • Create Turbo Streme template files
    • app/views/posts/create.turbo_stream.erb
    • app/views/posts/update.turbo_stream.erb
    • app/views/posts/destroy.turbo_stream.erb
  • <!-- app/views/posts/create.turbo_stream.erb -->
    <% if @post.errors.present? %>
       <%= notice_stream(message: :error, status: 'red') %>
       <%= form_post_stream(post: @post) %>
    <% else %>
       <%= notice_stream(message: :create, status: 'green') %>
    
       <%= turbo_stream.replace :new_post do %>
          <%= turbo_frame_tag :new_post %>
       <% end %>
    
       <%= turbo_stream.prepend 'posts', partial: 'post', locals: { post: @post } %>
    <% end %>
    <!-- app/views/posts/update.turbo_stream.erb -->
    <% if @post.errors.present? %>
      <%= notice_stream(message: :error, status: 'red') %>
    
      <%= form_post_stream(post: @post) %>
    
    <% else %>
      <%= notice_stream(message: :update, status: 'green') %>
    
      <%= turbo_stream.replace dom_id(@post), partial: 'post', locals: { post: @post } %>
    <% end %>
    <!-- app/views/posts/destroy.turbo_stream.erb -->
    <%= notice_stream(message: :delete, status: 'green') %>
    <%= turbo_stream.remove @post %>
    5) Implement Notification - Displaty notice
    Implement notice as a helper and allow routing then call controller to display in a view
    These steps use Stimulus to handle the Javascript
  • Create helper to be called from
  • # app/helpers/posts_helper.rb
    module PostsHelper
      NOTICE = {
        create: 'Post created successfully',
        update: 'Post updated successfully',
        delete: 'Post deleted successfully',
        error: 'Something went wrong'
      }.freeze
    
      def notice_stream(message:, status:)
        turbo_stream.replace 'notice', partial: 'notice', locals: { notice: NOTICE[message], status: status }
      end
    
      def form_post_stream(post:)
        turbo_stream.replace 'form', partial: 'form', locals: { post: post }
      end
    end
  • Add Turbo Frame to main application file
  • <!-- app/views/layouts/application.html.erb -->
     <%= turbo_frame_tag :notice, class: 'w-full' do %>
     <% end %>
  • Create Notice template in Post
  • <!-- app/views/posts/_notice.html.erb -->
    <p class="animate-pulse opacity-80 w-full py-2 px-3 bg-<%= status %>-50 mb-5 text-<%= status %>-500 font-medium rounded-lg inline-block" id="notice"><%= notice %></p>
    6) Implement Notification - Clear notice
  • Create clear notification route
  • <!-- app/views/posts/_form.html.erb --->
    # config/routes.rb
    get '/notice', to: 'posts#clear_message'
  • Add clear notification in Posts template
  • <!-- app/views/posts/_form.html.erb -->
      <%= turbo_frame_tag dom_id post do %>
        <%= form_with(
          model: post, 
          id: 'form',
          class: "contents",
          html: {
            data: { controller: 'notice', action: 'submit->notice#clear' }
          }
        ) do |form| %>
    
       <!-- fields  --->
    
       <% end %>
    <% end %>
  • Trigger clear notification after config interval (5000 ms)
  • # app/javascript/controllers/notice_controller.js
    import { Controller } from "@hotwired/stimulus"
    import { FetchRequest } from "@rails/request"
    
    // Connects to data-controller="notice"
    export default class extends Controller {
      clear(event) {
        event.preventDefault()
    
        setTimeout(async () => {
          const request = new FetchRequest("get", '/notice', { responseKind: "turbo-stream" })
          await request.perform()
        }, 5000)
    
        event.target.requestSubmit()
      }
    }
  • Add Action to Post controller
  • # app/controllers/posts_controller.rb
    class PostsController < ApplicationController
     # ... actions
    
     def clear_message
      respond_to do |format|
        format.turbo_stream
      end
     end
    end
    7) Config landing page
  • Redirect landing page to Posts index page
  • # config/routes.rb
    Rails.application.routes.draw do
      # Set Post index to landing page
      root 'posts#index'
    end
  • Start Rails server for verification
  • rails s
  • This app feature
  • Display all Post on a single page
  • Display Comment on each post when expanding
  • CRUD Post
  • CRUD Comment underneath Post
  • Notification when create, update and delete when successful or failed
  • Resources
    Read more
    Resource Attribute

    43

    This website collects cookies to deliver better user experience

    Rails 7.0 demo with Hotwire and Tailwind