DEV Community: John Kevin Baluyot

Google Login Rails 7 tutorial

John Kevin Baluyot — Wed, 06 Jul 2022 00:34:19 +0000

In this tutorial, I'll implement google login in rails 7 using omniauth in devise gem.

Take note, in this tutorial I'll be using login-demo as code base which is tackled in this tutorial.
It's best to look at it before proceeding on this one.

I'll be assuming you implemented devise login in your rails app.

Add these gems.

gem "omniauth-google-oauth2"

gem "omniauth-rails_csrf_protection"

Add this to your devise model(mine is User).
```
# models/user.rb
:omniauthable, omniauth_providers: [:google_oauth2]
```
This would add the omniauth function of devise to the rails app.

Add fields to devise table.

 class AddFieldsToUser < ActiveRecord::Migration[7.0]
     def change
       change_table :users, bulk: true do |t|
        t.string  :provider
        t.string :uid
       end
     end
 end

Run rails db:migrate to add these fields to theusers table.

I'll be saving the uid and provider (which the value for this would be google_oauth2). Though it might change depending on the provider you're using.

Create omniauth_callbacks_controller.rb.

# app/controllers/users/omniauth_callbacks_controller.rb
class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
   def google_oauth2
     user = User.from_google(from_google_params)

     if user.present?
       sign_out_all_scopes
       flash[:notice] = t 'devise.omniauth_callbacks.success', kind: 'Google'
       sign_in_and_redirect user, event: :authentication
     else
       flash[:alert] = t 'devise.omniauth_callbacks.failure', kind: 'Google', reason: "#{auth.info.email} is not authorized."
       redirect_to new_user_session_path
     end
    end

    def from_google_params
      @from_google_params ||= {
        uid: auth.uid,
        email: auth.info.email
      }
    end

    def auth
      @auth ||= request.env['omniauth.auth']
    end
end

Add this to your route.

# config/routes.rb
Rails.application.routes.draw do
    devise_for :user,
      controllers: {
         omniauth_callbacks: 'users/omniauth_callbacks'
      }

    # ------
    # Other routes
    # ------
end

Google Oauth

In this part, things get a bit complicated.

In this, we would get the google client id, client secret and configure the google console to enable OAuth which would allow the rails app to log in using google.

Go to https://console.cloud.google.com. Then select a project but if not create one.

I named my newly created project Login Demo.

Go to APIs & Services > Oauth consent screen

Choose user type External. Next is to fill up the necessary input value on the form.

Click Save and Continue at the bottom of the form.

Next is go to APIs & Services > Credentials. At the top click CREATE CREDENTIALS and choose OAuth client ID.

Choose Web application as Application type.

Check your routes and find the callback URL for google

Then add the callback URL to Authorized redirect URIs.

Then click Create. After creation, there should be a popup showing your client id and client secret. Save it for later use.

Now that you have your client id and client secret we're gonna start configuring google login in the rails app.

Implement Google Login

Add client id and client secret to your .env

# .env
GOOGLE_OAUTH_CLIENT_ID=''
GOOGLE_OAUTH_CLIENT_SECRET=''

Configure your devise.rb

# config/initializers/devise.rb

config.omniauth :google_oauth2, ENV['GOOGLE_OAUTH_CLIENT_ID'], ENV['GOOGLE_OAUTH_CLIENT_SECRET']

Now just add the google log in button

// app/views/shared/_user_details.html.erb
<%= button_to  'Login with Google', user_google_oauth2_omniauth_authorize_path, method: :post, :data => {turbo: "false"} %>

We have to create our custom link because the generated link for logging in with google may not work properly in rails 7.

Congratulations! 🎉 Now you have implemented google login to your rails 7 app.

You could check the repository here: https://github.com/jkevinbaluyot/login-demo/tree/omniauth-demo

References:

EDIT: 06/25/2023

I forgot to include this:

  # app/models/user.rb
  def self.from_google(email:, uid: )
    find_or_create_by!(email: email, uid: uid, provider: 'google_oauth2')
  end

Create Login in Ruby on Rails

John Kevin Baluyot — Mon, 09 May 2022 08:49:02 +0000

Want a simple login for your rails app? I'll cover that in this tutorial.

We will require the user to login in order to gain access to certain pages. Take note that this is a simple login, user roles and authentication won't be covered in this post.

First, we will create simple pages to demonstrate the website requiring the user to log in.

Create Pages

I'll create two pages, admin and home.

Create the views, admin.html.erb and home.html.erb at app/views/pages/.

    // app/views/pages/admin.html.erb

   <h1>Admin Home</h1>
   <p>app/views/pages/admin.html.erb</p>

    // app/views/pages/home.html.erb

   <h1>Home</h1>
   <p>app/views/pages/home.html.erb</p>

Now create the controller for these pages at app/controllers/.

  # app/controllers/pages_controller.rb

  class PagesController < ApplicationController
    def home
    end

    def admin
    end
  end

Finally, create routes for these pages.

  # config/routes.rb

  get "/admin" => "pages#admin", as: "admin"

  root "pages#home"

The pages should work by checking your localhost. The page for localhost:3000 should be app/views/pages/home.html.erb and localhost:3000/admin is app/views/pages/admin.html.erb.

Create Login

Now the pages were done, we will start implementing a login system. I'll be using devise gem. It has all of the things we need for a simple login.

Install devise gem by adding this to your Gemfile:
```
gem 'devise'
```
Then run bundle install.
Generate necessary files for devise running this in your terminal:
```
$ rails generate devise:install
```
If you're using rails 7 you may encounter an error. You may need to paste this code in your config/initializers/devise.rb:

config.navigational_formats = ['*/*', :html, :turbo_stream]

source
Create the migration files we would be using.
```
$ rails generate devise MODEL
```
Replace MODEL with the class name used for the application’s users (I mostly use User but could also be Admin).

Then run rails db:migrate.
Require the user to log in when visiting the admin page.

You could do this by updating app/controllers/pages.
```
class PagesController < ApplicationController
 before_action :authenticate_user!, only: :admin

 def home
 end

 def admin
 end
end
```
The before_action :authenticate_user! will check if the user is logged in. Depending on the model you might need to change to authenticate_MODEL!, example, if you chose to name your devise model Admin then it should be authenticate_admin!.

By adding only: :admin the action is only performed at admin action(app/views/pages/admin.html.erb).

That should do it! Restart your server and check it out!

Add links (Optional)

In here, I'll add a sign in and sign out links for the website.

Create file _user_detail.html.erb atapp/views/shared/.
```
// app/views/shared/_user_detail.html.erb
<% if user_signed_in? %>
 <%= button_to("Log Out", destroy_user_session_path, method: :delete) %>
<% else %>
 <%= link_to 'Log in', new_user_session_path %>
<% end %>
```
If you're using rails 7 logout button may not work properly you need to use this:
<%= button_to("Log Out", LOGOUT_PATH, method: :delete) %>
source

The paths here are the login in and sign out. You could check yours by running rails routes.

The user_signed_in? is a helper in devise. It returns true or false depending on if the user is logged in. This might changed depending on the chosen name for the devise model. If you chose Admin then it should be admin_signed_in?.
Add links to app/views/pages/home.html.erb and app/views/pages/admin.html.erb.
```
<%= render "shared/user_detail"%>
```

References:

You could check out my repository here.

Please do not repost

Foundation + Rails 7 tutorial

John Kevin Baluyot — Thu, 14 Apr 2022 10:44:26 +0000

Rails 7 is relatively new, so I can't see much documentation for it right now. Especially in using foundation as CSS framework in Rails 7. In this tutorial, I'll show you how I managed to make Foundation work.

We won't be using foundation-rails gem, it's currently not up to date. I'll be using a different method in this tutorial.

Be sure you're using Rails 7 for this one.

Install cssbundling-rails gem.
1. Add cssbundling-rails to your Gemfile with gem 'cssbundling-rails'
2. Run ./bin/bundle install
3. Run ./bin/rails css:install:sass
Install foundation-sites
```
yarn add foundation-sites
```
I'm using yarn for this tutorial. You could use npm for this one but I prefer yarn for now. For more information, you could check the foundation website.

Setup the SASS files.

Copy the file _settings.scss under node_modules/foundation-sites/scss/settings/_settings.scss. Then paste it in app/assets/stylesheets.

Edit the new _settings.scss. Change the line from:

@import  'util/util'

@import '../../../node_modules/foundation-sites/scss/util/util'

Create foundation_and_overrides.scss in app/assets/stylesheets with the following code:

@charset 'utf-8';

@import 'settings';
@import '../../../node_modules/foundation-sites/scss/foundation';

// Global styles
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Grids (choose one)
@include foundation-xy-grid-classes;
// @include foundation-grid;
// @include foundation-flex-grid;

// Generic components
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;
@include foundation-label;
@include foundation-progress-bar;
@include foundation-slider;
@include foundation-switch;
@include foundation-table;

// Basic components
@include foundation-badge;
@include foundation-breadcrumbs;
@include foundation-callout;
@include foundation-card;
@include foundation-dropdown;
@include foundation-pagination;
@include foundation-tooltip;

// Containers
@include foundation-accordion;
@include foundation-media-object;
@include foundation-orbit;
@include foundation-responsive-embed;
@include foundation-tabs;
@include foundation-thumbnail;

// Menu-based containers
@include foundation-menu;
@include foundation-menu-icon;
@include foundation-accordion-menu;
@include foundation-drilldown-menu;
@include foundation-dropdown-menu;

// Layout components
@include foundation-off-canvas;
@include foundation-reveal;
@include foundation-sticky;
@include foundation-title-bar;
@include foundation-top-bar;

// Helpers
@include foundation-float-classes;
// @include foundation-flex-classes;
@include foundation-visibility-classes;
// @include foundation-prototype-classes;

This code is referenced from this.

Import the foundation_and_overrides.scss in application.sass.scss:

// app/assets/stylesheets/application.sass.scss
@import "foundation_and_overrides";

We're almost done. We just need the javascript necessary to use foundation.

Download foundation-sites js.
```
$ ./bin/importmap pin foundation-sites --download
```
This would download the javascript needed for the foundation. It would also download jquery. The downloaded file is located in /vendor/javascript

Next is add the javascripts in config/initializers/assets.rb
```
Rails.application.config.assets.precompile += %w( foundation-sites.js jquery.js  )
```
After that, update app/javascript/application.js
```
// Other imports...
import jquery from "jquery"
import "foundation-sites"

window.jQuery = jquery
window.$ = jquery

$(function() {
  $(document).foundation();
})
```
Finally, recompile assets by running:
```
$ rails assets:precompile
```
That should do it! Check your rails app. Run localhost by using ./bin/dev instead of rails server.

In case you want to see the code, you could check the repository.

Create Seamless Loading in Ruby on Rails

John Kevin Baluyot — Sat, 05 Mar 2022 02:25:33 +0000

Do you want your rails app to automatically load the next page when scrolled to the bottom? That's what we're covering in this post. We will create a rails app like Pinterest in Rails 6.

Create the Image scaffold.
```
$ rails g scaffold Image url:string author:string
```
This will generate the necessary files for the rails app. You
don't need to know most of them. We will be editing only some
of the files.

To create the image table, run this on your terminal:
```
$ rails db:migrate
```
Edit config/routes.rb.
```
Rails.application.routes.draw do
 root to: "images#index"
end
```
This way the root page would use image#index by
default (localhost:3000).

Edit db/seeds.rb

require "net/http"

url = "https://picsum.photos/v2/list?page=2&limit=100"
resp = Net::HTTP.get_response(URI.parse(url))
data = JSON.parse(resp.body)

data.each do |d|
 url = "https://picsum.photos/200/#{300+(rand(1..5)*20)}" #This will use random heights for the image
 p Image.where(author: d['author'], url: url).first_or_create
end

The URL, "https://picsum.photos/v2/list?page=2&limit=100" will return 100 random images that we will be using as seed for our rails app. For more information about this you could check it here.

Then run in your terminal:

 $ rails db:seed

Update app/views/images/index.html.erb.

<header class="container">
 <h1 class="element-stack">Pinterest Flow</h1>
 <p class="element-stack">Scroll down to load more data</p>
</header>

<div id="columns">
 <%- @images.each do |image| %>
  <figure>
    <img src=<%= image.url %>>
    <figcaption><%= image.author%></figcaption>
  </figure>
 <% end %>
</div>

Edit app/assets/stylesheets/images.scss or app/assets/stylesheets/images.css, depending on what's generated by the scaffold.

@font-face{font-family:'Calluna';
src:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/callunasansregular-webfont.woff') format('woff');
}
body {
 background: url(//subtlepatterns.com/patterns/scribble_light.png);
 font-family: Calluna, Arial, sans-serif;
 min-height: 1000px;
}
#columns {
    column-width: 150px;
    column-gap: 15px;
    width: 90%;
    max-width: 1100px;
    margin: 50px auto;
}

div#columns figure {
    background: #fefefe;
    margin: 0 2px 15px;
    padding-bottom: 10px;
    transition: opacity .4s ease-in-out;
    display: inline-block;
    column-break-inside: avoid;
    min-height: 100px;
}

div#columns figure img {
    width: 100%; height: auto;
    border-bottom: 1px solid #ccc;
    margin-bottom: 5px;
    border-radius: 15px;
}

div#columns figure figcaption {
    font-size: .9rem;
    color: #444;
    line-height: 1.5;
}

div#columns small {
    font-size: 1rem;
    float: right;
    text-transform: uppercase;
    color: #aaa;
}

div#columns small a {
    color: #666;
    text-decoration: none;
    transition: .4s color;
}

@media screen and (max-width: 750px) {
    #columns { column-gap: 0px; }
    #columns figure { width: 100%; }
}

This CSS is from this.

Also import it in application.css.

/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require card
*= require_tree .
*= require_self
*/

@import "images";

This is the styling we would be using. You could check out your localhost to check if it is all okay.

Add paginate for images using will_paginate gem. Add this to the Gemfile.
```
gem 'will_paginate'
```
Then run bundle install.
```
$ bundle install
```

Edit index action in app/controllers/images_controller.rb.

# GET /images or /images.json
def index
 @images = Image.all.paginate(page: params[:page], per_page: 15)
end

Create _images.html.erb in app/views/images with this code.

<%- images.each do |image| %>
 <figure>
   <img src=<%= image.url %>>
   <figcaption><%= image.author%></figcaption>
 </figure>
<% end %>

Then edit app/views/images/index.html.erb.

<div id="columns">
 <%=render partial: "images", locals:{images: @images} %>
</div>

<%= will_paginate @images %>

This would make paginate working in our rails app.

Add Jquery to Rails. Run this in your terminal.

$ yarn add jquery

Then add the code below in config/webpack/environment.js.

const webpack = require('webpack')
environment.plugins.prepend('Provide',
 new webpack.ProvidePlugin({
  $: 'jquery/src/jquery',
  jQuery: 'jquery/src/jquery'
})
)

Require jquery in application.js file.

require("jquery")

Create jquery.pageless.js in app/javascript/packs with this code

Then require it in the application.js file.
```
require("jquery")
require("packs/jquery.pageless")
```

Add this code in app/views/images/index.html.erb.

<script type="text/javascript" charset="utf-8">
 var totalPages = <%= @images.total_pages %>;
 var url = '<%= root_path%>';
 $('#columns').pageless({ totalPages: totalPages
                   , url: url
                   , loaderMsg: 'Loading more results'
                   });
</script>

Edit app/controllers/images_controller.rb.

def index
 @images = Image.all.paginate(page: params[:page], per_page: 15)

 if request.xhr?
   render partial: 'images/images', locals:{images: @images}
 end
end

Now check your localhost to see if it's running.

And that's it. We're done! 😃

If you want to check the code. You could do it here:
Github Repository

Ruby on Rails - Comment realtime loading

John Kevin Baluyot — Sun, 30 Jan 2022 08:37:43 +0000

The goal of this post was to create a real-time loading of comments on ruby on rails. Like in this demonstration:

Take note:

This is a continuation of my previous blog post here: Create Post and Comment in Ruby on Rails. I highly suggest that you look at it since it will be used as a base for this one. If you wanna get the base first, you could check this.

Let's start, shall we?

Install react-rails gem by adding this to the Gemfile:

gem 'react-rails'

then run bundle install.

After installing, run these commands to your console:

$ bundle install
$ rails webpacker:install         # OR (on rails version < 5.0) rake webpacker:install
$ rails webpacker:install:react   # OR (on rails version < 5.0) rake webpacker:install:react
$ rails generate react:install

We would be using jquery for our API. Install jquery using:

 $ yarn add jquery

Add this code to your environment.js.

 const webpack = require('webpack')
 environment.plugins.prepend('Provide',
   new webpack.ProvidePlugin({
     $: 'jquery/src/jquery',
     jQuery: 'jquery/src/jquery'
   })
)

module.exports = environment

Edit the newly generated application.js under 'app/javascript/packs/'.

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

// Support component names relative to this directory:
var componentRequireContext = require.context("components", true);
var ReactRailsUJS = require("react_ujs");
ReactRailsUJS.useContext(componentRequireContext);

require("@rails/ujs").start()
require("jquery")

Add the application.js to the head layout at the 'app/views/layouts/'.

<%= javascript_pack_tag 'application' %>

Create the React Component.
```
$ rails g react:component CommentSection commentsPath:string
```
This would generate the react component we will be using for the real-time loading of comments. The 'commentsPath:string' is the props that will pass the API URL to the component.
Install the active model serializer gem after adding this to your Gemfile.
```
gem 'active_model_serializers'
```
Create the comment serializer by typing this to your console.
```
$ rails g serializer Comment
```
Then add the text field to the comment serializer.
```
class CommentSerializer < ActiveModel::Serializer
    attributes :id, :text
end
```

Now we will create the controller we would be using for the API.

Create the API folder first. Go to the controller folder in the rails app, then do this:

$  mkdir api

Then go to the newly created folder and make the controller we would be using.

$ touch posts_controller.rb

Edit posts_controller.rb with this code.

class Api::PostsController < ApplicationController
    before_action :set_post, only: [:comments]

    def comments
        render json: @post.comments, each_serializer: CommentSerializer
    end

    private

    def set_post
       @post = Post.find(params[:id])
    end
 end

The posts#show should return an array of comments.

Add the API path to config/routes.rb.

Rails.application.routes.draw do
 # other routes

 namespace :api do
    resource :posts, only: [], defaults: {format: "json"} do
        member do
            get "/:id/comments" => "posts#comments", as: "comments"
        end
    end
 end
end

Get the pathname of the newly added route by checking 'rails routes' to your console terminal. In my case, its 'comments_api_posts_path'.

Add react component to post#show view. Pass the new pathname we just created in the react component.

<!--app/views/posts/show.html.erb-->
<p id="notice"><%= notice %></p>

<%= @post.title %>
<br>
<%= @post.text %>
<br>

<b>Comments</b>
<br>

<%= react_component("CommentSection", { commentsPath: comments_api_posts_path(id: @post.id)}) %>

<%= render "comments/form", comment: @comment, post_id: @post.id%>

<%= link_to 'Edit', edit_post_path(@post) %> |
<%= link_to 'Back', posts_path %>

The commentsPath will be passed down the path as props in the react component.

Update the React component CommentSection.js.

import React from "react"
import PropTypes from "prop-types"

class CommentSection extends React.Component {
   constructor(props){
      super(props);

      this.state = {
          comments: []
      }
   }

   componentDidMount(){
       //Run fetchComments() for the first time
       this.fetchComments();

       //Set Interval for running fetchComments()
       this.interval = setInterval(() =>{
           this.fetchComments();
       }, 1000);
   }

   componentWillUnmount(){
       // Clear the interval right before component unmount
       clearInterval(this.interval);
   }

   // Fetches Comments
   fetchComments(){

       $.ajax({
           url: this.props.commentsPath,
           dataType: 'json',
           success: function (result){
               //Set state based on result
               this.setState({comments: result})
          }.bind(this)
       });
   }

   render () {
       return (
           <React.Fragment>
               <ul>
                   {
                     this.state.comments.map(function(comment, index){

                     return <li key={index}>{comment.text}</li>
                   })
                   }
              </ul>
           </React.Fragment>
       );
   }
 }

 export default CommentSection

A little bit of explanation. The fetchComments() function, fetches the comments of the post based on the value of commentsPath props(with the value of the API path of the current post). The result of the fetch will return an array of comments and that will be set as a state, which will be rendered by the component.

Change the form at the 'app/views/comments/_form.html.erb' and comments_controller.rb.

 <!-- app/views/comments/_form.html.erb -->
 <!--  add 'local:false' in the form_with-->

 <%= form_with(model: comment, local: false) do |form| %>

 # app/controllers/comments_controller.rb
 # edit create action

 def create
     @comment = Comment.new(comment_params)

     if @comment.save
         respond_to do |format|
             format.js{ render :js => "document.getElementById('comment_text').value = '';" }
         end
     end
 end

The javascript would remove the text after you submit the comment form.

And that's the last step! Try restarting your server, and check your localhost.

If you want to check the code, go to the Github Repository.

React v17 - Redirect route if the URL didn't exist

John Kevin Baluyot — Fri, 24 Dec 2021 06:33:57 +0000

I'm practicing react v17 and react-router-dom v6 a bit lately and I stumbled to a simple problem.

How to redirect a page when the URL doesn't exist in your application?

Kinda like this. Let say you went to localhost:3000/login and that URL doesn't exist in your react application. What I want to happen is to redirect to a certain URL, like localhost:3000/404

What I did to solve this problem was, first is to create MissingRoute.js

import { Navigate } from 'react-router-dom';

function MissingRoute() {
   // pathname can be change based on what url you want to redirect to
   return < Navigate to={{pathname: '/404'}} / >
}

export { MissingRoute }

Then I use it in the routes:

import { MissingRoute } from './path/to/file';

function App() {
  return (
    <BrowserRouter>
     <Routes>
      <Route path="*" element={<MissingRoute/>} /> 
     </Routes>
    </BrowserRouter>
  )
}

This way it would redirect to localhost:3000/404 each time you input an invalid URL.

Create Post and Comment in Ruby on Rails

John Kevin Baluyot — Sun, 24 Oct 2021 12:25:50 +0000

Post

Generate Files for Post.

   $ rails g scaffold Post

Ruby will create several files:

   create    db/migrate/20211010101809_create_posts.rb
   create    app/models/post.rb
   invoke  resource_route
   route    resources :posts
   invoke  scaffold_controller
   create    app/controllers/posts_controller.rb
   create      app/views/posts
   create      app/views/posts/index.html.erb
   create      app/views/posts/edit.html.erb
   create      app/views/posts/show.html.erb
   create      app/views/posts/new.html.erb
   create      app/views/posts/_form.html.erb

Add fields to Post by editing the newly created migration file.

   class CreatePosts < ActiveRecord::Migration[6.1]
     def change
       create_table :posts do |t|
         t.string :title
         t.text :text

         t.timestamps
       end
     end
   end

Create Post table by running:

   $ rails db:migrate

Terminal output:

   == 20211010101809 CreatePosts: migrating ======================================
   -- create_table(:posts)
      -> 0.0032s
   == 20211010101809 CreatePosts: migrated (0.0040s) =============================

This means that the Post table was successfully created.

Update app/views/posts/_form.html.erb.

   <%= form_with(model: post) do |form| %>
     <% if post.errors.any? %>
       <div id="error_explanation">
         <h2><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h2>

         <ul>
           <% post.errors.each do |error| %>
             <li><%= error.full_message %></li>
           <% end %>
         </ul>
       </div>
     <% end %>

     <%= form.label :title, "Title:" %>
     <%= form.text_field :title %>

     <%= form.label :text, "Text:" %>
     <%= form.text_area :text %>

     <div class="actions">
       <%= form.submit %>
     </div>
   <% end %>

This form will be used to create or update posts.

Go to app/controllers/posts_controller.rb.
Add fields to the strong params to the controller for it to accept values from the app/views/posts/_form.html.erb. This is done for added security.

   class PostsController < ApplicationController
       #---------
       # Other actions
       #---------

       def post_params
         params.require(:post).permit(:title, :text)
       end
   end

We're almost done with the post. Now we're just gonna edit the views to properly show the data saved in the post.

Edit app/views/posts/index.html.erb.

   <p id="notice"><%= notice %></p>

   <h1>Posts</h1>

   <table>
     <thead>
        <tr>
         <th colspan="3"></th>
       </tr>
     </thead>

     <tbody>
       <% @posts.each do |post| %>
         <tr>
           <td><%= post.title %></td>
           <td><%= link_to 'Show', post %></td>
           <td><%= link_to 'Edit', edit_post_path(post) %></td>
           <td><%= link_to 'Destroy', post, method: :delete, data: { confirm: 'Are you sure?' } %></td>
         </tr>
       <% end %>
      </tbody>
   </table>

   <br>

   <%= link_to 'New Post', new_post_path %>

This will show the post's title in "localhost:3000/posts".

   <! -- app/views/posts/show.html.erb -- >
   <p id="notice"><%= notice %></p>

   <%= @post.title %>
   <br>
   <%= @post.text %>
   <br>

   <%= link_to 'Edit', edit_post_path(@post) %> |
   <%= link_to 'Back', posts_path %>

This will show post title and text values at the "localhost:3000/posts/[id]".

We're done at the first half. Now we'll begin at Comment.

Comment

Generate files for Comment.

 $ rails g scaffold Comment

Ruby will create some files:

 create    db/migrate/20211017054528_create_comments.rb
 create    app/models/comment.rb
 invoke  scaffold_controller
 create    app/controllers/comments_controller.rb
 invoke    erb
 create      app/views/comments
 create      app/views/comments/index.html.erb
 create      app/views/comments/edit.html.erb
 create      app/views/comments/show.html.erb
 create      app/views/comments/new.html.erb
 create      app/views/comments/_form.html.erb

Comments are usually rendered under Post so we will be using only _form.html.erb.

Add fields to Comment by editing the newly created migration file.

 class CreateComments < ActiveRecord::Migration[6.1]
   def change
     create_table :comments do |t|
       t.integer :post_id
       t.text :text

       t.timestamps
     end
   end
 end

If you noticed, I added the post_id field to the comment. This will be used as a reference to the Post
table.

Create the Comment table by running:

 $ rails db:migrate

Terminal output:

 == 20211017054528 CreateComments: migrating ===================================
 -- create_table(:comments)
    -> 0.0215s
 == 20211017054528 CreateComments: migrated (0.0218s) ==========================

This means that the Comment table was successfully created.

Now we will be adding the relationship between Post and Comment.

 #models/post.rb
 class Post < ApplicationRecord
  has_many :comments
 end

 #models/comment.rb

 class Comment < ApplicationRecord
  belongs_to :post
 end

Update app/views/comments/_form.html.erb.

  <%= form_with(model: comment) do |form| %>
   <% if comment.errors.any? %>
    <div id="error_explanation">
     <h2><%= pluralize(comment.errors.count, "error") %> prohibited this comment from being saved: 
     </h2>

     <ul>
      <% comment.errors.each do |error| %>
       <li><%= error.full_message %></li>
      <% end %>
     </ul>
    </div>
   <% end %>

   <%= form.hidden_field :post_id %>

   <%= form.label :text, "Text:" %>
   <%= form.text_area :text %>

   <div class="actions">
    <%= form.submit %>
   </div>
  <% end %>

We're getting the comment form to be added under the post.

Update strong params to accept values from comment form at the comments_controller.rb.

 class CommentsController < ApplicationController
    #---------
    # Other actions
    #---------

    def comment_params
     params.require(:comment).permit(:post_id, :text)
    end
 end

Add comment form in app/views/posts/_form.html.erb.

 <p id="notice"><%= notice %></p>

 <%= @post.title %>
 <br>
 <%= @post.text %>
 <br>

 <%= render "comments/form", comment: @comment%>

 <%= link_to 'Edit', edit_post_path(@post) %> |
 <%= link_to 'Back', posts_path %>

This may not work yet. We need to @comment variable used for the comment form.

Update post_controller.rb

 class PostsController < ApplicationController
    #---------
    # Other actions
    #---------

    def show
     @comment = @post.comments.build
    end

   #---------
   # Other actions
   #---------

 end

This will create @comment each time you show a post. The comment form under the post should work now but if the form has been submitted, the page redirects to "localhost:3000/comments/[id]" instead of "localhost:3000/posts/[id]".

To redirect to "localhost:3000/posts/[id] after submitting a comment we have to update comments_controller.rb.

 class CommentsController < ApplicationController
    #---------
    # Other actions
    #---------

    def create
     @comment = Comment.new(comment_params)

     respond_to do |format|
       if @comment.save
         format.html { redirect_to @comment.post, notice: "Comment was successfully created." }
       else
         format.html { render :new, status: :unprocessable_entity }
       end
     end
   end

   #---------
   # Other actions
   #---------
 end

We're almost done. Now we only have to render the comments under the post.

Edit app/views/posts/show.html.erb.

 <p id="notice"><%= notice %></p>

 <%= @post.title %>
 <br>
 <%= @post.text %>
 <br>

 <b>Comments</b>
 <br>
 <%- @post.comments.each do |comment|%>
   <%= comment.text%>
   <br>
 <% end %>

 <%= render "comments/form", comment: @comment%>

 <%= link_to 'Edit', edit_post_path(@post) %> |
 <%= link_to 'Back', posts_path %>

To check posts go to 'localhost:3000/posts'

That's it we're done 🎉

If you want to see the code, you could check here:
Github repository

Update 1/30/2022

I created a new blog post that adds real-time loading of comments for this, which can be seen here: Ruby on Rails - Comment real-time loading

Update 6/18/2022

Updated based on the comment