Forem: Shivashankar

RSpec - test console input and output

Shivashankar — Mon, 13 Jul 2020 17:29:14 +0000

Testing the ruby console input (gets) and output (puts) using RSpec is pretty simple.

Testing gets input

   total = gets.to_i

# Rspec

  allow($stdin).to receive(:gets).and_return(4)
  total = $stdin.gets.to_i

  it "should return received input" do
    expect(total).to eql 4 
  end

Testing puts

Assume we need to test the following output by puts method

   def recently_published_books
     puts "==== Recently Published Books ===="
     puts "1. Atomic Habits"
     puts "2. Intelligent Investor"  
  end

Rspec to test the above puts output

   msg = <<~PUBLISHED
      ==== Recently Published Books ====
      1. Atomic Habits
      2. Intelligent Investor 
    PUBLISHED

   it "should display the recently published books" do
     expect { recently_published_books }.to output(msg).to_stdout 
   end

rails 6: Prevents logging sensitive info accidentally

Shivashankar — Mon, 29 Jun 2020 20:06:34 +0000

Introduction

In Rails generally we filter out sensitive params getting logged in the logs. But it has an issue. It exposes the filtered params when we inspect the object.

Assume we have a user model and for example sake I am not encrypting the password here

class User < ApplicationRecord
  validates :name, :email, :password, presence: true
end

And we have configured our application to filter out password
config/application.rb

config.filter_parameters += ["password"]

When we create a user object, the password gets filtered in the log/console

User.create(name: 'John', email: 'john@example.com', password: 'password')

#<User id: 1, name: 'John', email: "john@example.com", password: [FILTERED] ....>

The catch is when we use inspect method it displays the password and it does not respect the filter_parameters configuration.

Solution

These issues exist upto Rails 5. Rails 6 fixed this issue and also introduced a flexible option filter_attributes

In rails6 we shall filter out sensitive params via our usual configuration.

  config.filter_parameters += ["password"]

and also using filter_attributes as follows

class User < ApplicationRecord
  self.filter_attributes=[:password]
  validates :name, :email, :password, presence: true
end

The filter_attributes is configured in model, it takes priority and ignore the filter_parameters

For example

class User < ApplicationRecord
  self.filter_attributes=[]
  validates :name, :email, :password, presence: true
end

 User.new(password: 'password')

It now reveals password

#<User id: nil, name: nil, password: 'password', created_at: nil, updated_at: nil>

We shall use filter_attributes to not only prevent logging sensitive data but also from logging very huge data fields like blob and text (in case if it not important) thus we shall reduce the size of log file as well :)

Using ruby reduce method for refactoring.

Shivashankar — Fri, 19 Jun 2020 13:13:11 +0000

Using ruby 'reduce' method for refactoring our frequently used code.

Assume we have Employee class which has more than 20 attributes. We have a method basic_details to fetch the
details of basic 5 predefined attributes value.

Generally using loop, the code will be as follows.

class Employee
  BASIC_FIELDS = ['name', 'age' , 'gender', 'email', 'designation']
  attr_accessor :name, :age, :gender, :education, :email, :designation 
  # + some additional 20 attributes

  # code without refactoring to fetch the basic_details
  def basic_details
    details = {}
    BASIC_FIELDS.each do |attr| 
      details.merge!(attr => send(attr))    
    end
   details
  end
end

We shall use reduce method to refactor the basic_details as follows

class Employee
  BASIC_FIELDS = ['name', 'age' , 'gender', 'email', 'designation']
  attr_accessor :name, :age, :gender, :email, :education, :designation 
  # + some additional 20 attributes

  # code using reduce method
  def basic_details
    BASIC_FIELDS.collect{|attr| {attr => send(attr)} }.reduce({}, :merge)
  end
end

StimulusReflex: Working with user roles in rails views

Shivashankar — Thu, 18 Jun 2020 09:54:16 +0000

Introduction

In almost every rails application that uses authentication, we have a set of user roles, at least 'admin' and 'user' roles.

In Rails views, we show/hide certain critical links or sections based on user roles. This post is about how to implement the same with StimulusReflex.

Assume we have tasks model with fields title and status.
a) Admin view tasks as follows

Title	Status
Fix homepage css issue	Mark as resolved	Remove
Add new banner	Mark as resolved	Remove
Iphone support	Resolved	Remove

b) Non Admin user view tasks as follows

Title	Status
Fix homepage css issue	Pending
Add new banner	Pending
Iphone support	Resolved

Here 'Admin' only can mark a task as 'Resolved' or can remove a task.

So in rails view we need to find the current user role. If current user is admin we shall show the Mark as resolved link and Remove link else we do not.

It is very simple when we work in normal rails application. we can directly use current_user method and get user role.
But when we work with Stimulus Reflex it is not enough.
We need some tweaks in that.

This post covers how to add , edit and remove record based on user role.

Step 1: Add stimulus_reflex and cable_ready gems in Gemfile

gem 'cable_ready'
gem "stimulus_reflex", "~> 3.2"

$ bundle install

Step 2: create scaffold and migrate

$ rails g scaffold User name email role
$ rails g scaffold Task title description resolved:boolean
$ rake db:migrate

Step 3: update app/channels/application_cable/connection.rb

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    private
      def find_verified_user
        if verified_user = User.find_by(id: cookies.encrypted[:user_id])
          verified_user
        else
          reject_unauthorized_connection
        end
      end
  end
end

Step 4: create tasks channel

rails g channel Tasks

Step 5: update tasks channel app/channels/tasks_channel.rb

class TasksChannel < ApplicationCable::Channel
  delegate :current_user, to: :connection

  # Instead of single channel 'tasks' now we need separate 
  # channels based on user roles.  
  def subscribed
    stream_from channel_name
  end

  def channel_name
   # assuming role does not has any whitespace
   "tasks-#{current_user.role}"
  end
end

Step 6: Update app/javascript/channels/tasks_channel.js

import cableReady from 'cable_ready'
import consumer from "./consumer"

consumer.subscriptions.create("TasksChannel", {
  received(data) {
    if (data.cableReady) cableReady.perform(data.operations)
  }
});

Step 7: Generate tasks reflex

$ rails g stimulus_reflex Tasks

Step 8: Add available user roles in User model

class User < ApplicationRecord
  def self.roles
    ['admin', 'user']
  end

  def admin?
    role == 'admin'
  end 
end

Step 9: Update app/reflexes/tasks_reflex.rb

class TasksReflex < ApplicationReflex
  include CableReady::Broadcaster

  def update
    # verify current_user is admin? 
    # raise exception or appropriate error message here.
    return unless current_user.admin?

    id = element.dataset[:id]
    task = Task.find(id)
    task.update(resolved: true)

    User.roles.each do |role|
      channel_name = "tasks-#{role}"
      cable_ready["tasks"].text_content(
        selector: "status-col-#{id}",
        text: 'Resolved'
       )
      cable_ready.broadcast
    end 
  end 

  def remove(id)
    # verify current_user is admin? 
    # raise exception or appropriate error message here.
    return unless current_user.admin?

    task = Task.find(id)
    task.destroy 

    # in views we have set id for each row
    # When admin remove a row both admin and non-admin users 
    # channel receives notification

    User.roles.each do |role|
      channel_name = "tasks-#{role}"
      cable_ready["tasks"].remove(
        selector: "row-#{id}"
      )
      cable_ready.broadcast
    end
  end
end

Step 10: Update app/javascript/controllers/tasks_controller.js

import ApplicationController from './application_controller'
export default class extends ApplicationController {
  remove(event) {
    event.preventDefault();
    // This is where we are prompting the user for confirmation
    const ok = confirm("Are you sure to mark the task as 'resolved'?")
    if(!ok){
      return false;
    }else{
      const el = event.currentTarget
      const id = el.getAttribute("data-id");
      this.stimulate("TasksReflex#delete", id)
    }
  }
}

Step 11: Update app/controllers/tasks_controller.rb

class TasksController < ApplicationController
  include CableReady::Broadcaster

  def index
    @tasks = Task.all
  end  

  # Handling new task creation
  def create
    @task = Task.new(task_params)
    if @task.save
      # broadcast changes to all users
      User.roles.each do |role|
        cable_ready["tasks-#{role}"].insert_adjacent_html(
          selector: "#tasks",
          position: "beforeend",
          html: render_to_string(partial: "task", locals: {admin: (role == 'admin'), task: @task})
        )
        cable_ready.broadcast
      end 
    end  
  end  

  def task_params
    params.require(:task).permit(:title, :description)
  end
end

Step 12: Update app/views/tasks/index.html.erb

    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Title</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="tasks" data-reflex-root="#tasks">
        <!-- pass `admin` in locals which can be used while broadcasting with reflex --> 
        <% @tasks.each do |task| %>
          <%= render 'task', collection: @tasks, locals: {admin: current_user.admin?} %>
        <% end %>
      </tbody> 
     </table>

Step 13: Update app/views/tasks/_task.html.erb

    <!-- unique row id  -->
      <tr id="row-<%= task.id %>">
        <td><%= task.title %></td>
        <td id="status-col-<%= task.id %>">
          <!-- TODO: Move this to helper or decorator -->
          <% if admin && !task.resolved %>
             <%= link_to 'Mark as resolved', '#',  data:{reflex: 'click->TasksReflex#update', id: task.id} %>
          <% else %>
            <%= task.resolved? ? 'Resolved' : 'Pending'
          <% end %>

        </td>
        <td data-controller="tasks">
          <!-- Show the 'Remove' option only for admin -->
          <% if admin %>
             <!-- Call controller instead of Reflex to show confirmation --> 
             <%= link_to 'Remove', '#', data:{action: "click->tasks#remove", id: task.id} %> 
          <% end %>
        </td>
      </tr>

By having different channels based on roles now we can easily apply role based restriction to any section in rails views

Using created_at field to improve pagination performance

Shivashankar — Wed, 17 Jun 2020 17:27:48 +0000

Introduction

We know the pagination becomes very slow if we use offset based pagination alone, as time progress and the DB gets accumulated with a huge volume of records.

This post is intended to give some hints on improving pagination performance.

Assume we have posts table with following fields
id
title
description
created_at
updated_at

Assume we have 1M records in the posts table.

  mysql> select * from posts order by created_at desc, title asc limit 20 offset 0;

The query takes 0.08 secs.

mysql> select * from posts order by created_at desc, title asc limit 20 offset 50000;

The query takes 1.17 secs.

mysql>select * from posts order by created_at desc, title asc limit 20 offset 75000;

The query now takes 2.60 secs. So the time gets increases when ever the offset value increases.

To handle this one, we shall filter the records using created_at field and indexing the created_at field.

Step: 1 fetch the latest created record date

 mysql> select created_at from posts order by id desc limit 1

Assume we get the result as 2020-05-01 13:00:40.949669

Now we shall use this created_at for pagination.

Fetching first page.

mysql> select * from posts where created_at <= '2020-05-01 13:00:40.949669' order by created_at desc, title asc limit 20

The query takes just 0.07 seconds.

Assume the 20th record of the result as follows

  117414 | Money saving schemes | Personal Finance   | 2020-05-01 13:00:29.981149 | 2020-06-17 13:00:29.981493

Now to fetch the second page, we need to filter the records using the above created_at value. i.e 2020-05-01 13:00:29.981149

Now the query will be

  mysql> select * from posts where created_at <= '2020-05-01 13:00:29.981149' order by created_at desc, title asc limit 20

The query takes same 0.07 seconds.

The main advantage with this sort of pagination takes almost the consistent time i.e 0.07 secs (here) whenever we fetch any page. This type of implementation is well suited for endless pagination.

Using Splat (*) operator in Active record Query

Shivashankar — Tue, 16 Jun 2020 04:59:11 +0000

Introduction

In Rails often we use active record to build custom search queries.

This post is about how to use splat(*) operator with active record

Assume we have a table employees with following fields

first_name
middle_name
last_name
email

and we have a class method list to filter the employees

class Employee < ApplicationRecord
  def self.list(search_key='')
    arel = order("first_name")

    if search_key.present?
      search_term = "%" + search_key + "%"
      arel = arel.where("first_name LIKE ? OR middle_name LIKE ? OR last_name LIKE ? OR email LIKE ?", 
                         search_term, search_term, search_term, search_term)
    end
   arel 
  end 
end

The code can be bit optimised using Splat operator as follows

class Employee < ApplicationRecord
  def self.list(search_key='')
    arel = order("first_name")

    if search_key.present?
      search_term = Array.new(4){ "%" + search_key + "%" }
      arel = arel.where("first_name LIKE ? OR middle_name LIKE ? OR last_name LIKE ? OR email LIKE ?", *search_term)
    end
   arel 
  end 
end

In above case all fields are strings

Case 2 : How about searching fields with different data types

Assume we now have a table employees with following fields

first_name
middle_name
last_name
email
age (integer)
mobile: integer ( for example case)

In this case the query will be

class Employee < ApplicationRecord
  def self.list(search_key='')
    arel = order("first_name")

    if search_key.present?
      search_term_str = Array.new(4){ "%" + search_key + "%" }
      search_term_int = Array.new(2){ search_key }

      arel = arel.where("first_name LIKE ? OR middle_name LIKE ? OR last_name LIKE ? OR email LIKE ? OR age = ? OR mobile = ?", 
                        *search_term_str, *search_term_int)
    end
   arel 
  end 
end

We shall create multiple splat groups based on the data type as above to optimize the code

Catch unsafe rails db migrations with strong_migrations gem

Shivashankar — Mon, 15 Jun 2020 10:50:30 +0000

Introduction

In rails we are using migrations for performing database structure/schema modifications.

While doing so, we may end with many unsafe migrations. We shall go for strong_migrations gem to make sure we write safe migrations.

It is also helpful to force the entire team to follow it as a best practice.

Step: 1 Add strong_migrations to `Gemfile`

  gem 'strong_migrations'

Note: Do not add the gem under any group.

 $ bundle install
 $ rails generate strong_migrations:install

Step 2: checking the strong migrations

$ rails g scaffold User name:string{50} email
$ rake db:migrate

Adding column with default value

$ rails g migration add_status_to_users status:integer

update db/migrate/20200615103121_add_status_to_users.rb

class AddStatusToUsers < ActiveRecord::Migration[6.0]
  def change
    add_column :users, :status, :integer, default: 1
  end
end

$ rake db:migrate

When we attempt to migrate the above migration it throws error as follows

rake aborted!
StandardError: An error has occurred, all later migrations canceled:

=== Dangerous operation detected #strong_migrations ===

Adding a column with a non-null default causes the entire table to be rewritten.
Instead, add the column without a default value, then change the default.

class AddStatusToUsers < ActiveRecord::Migration[6.0]
  def up
    add_column :users, :status, :integer
    change_column_default :users, :status, 1
  end

  def down
    remove_column :users, :status
  end
end

Then backfill the existing rows in the Rails console or a separate migration with disable_ddl_transaction!.

class BackfillAddStatusToUsers < ActiveRecord::Migration[6.0]
  disable_ddl_transaction!

  def up
    User.unscoped.in_batches do |relation|
      relation.update_all status: 1
      sleep(0.01)
    end
  end
end

strong_migrations not only report the issue, it gives the suggestions as well, which is one of the most important notable feature.

Gem to truncate HTML strings efficiently ...

Shivashankar — Fri, 12 Jun 2020 13:20:53 +0000

Generally we use truncate view helper to truncate the text.

But it has an issue that it truncate the html tag as well and in worst case, a partial html tag gets truncated.

For example:

truncate("The Rails philosophy includes two major guiding principles: <strong>Don't Repeat Yourself:</strong>", length: 7
0)

It gives output as

"The Rails philosophy includes two major guiding principles: &lt;strong..."

It is not the desired output we want. Reason is it breaks the html tags.

truncato gem comes as a rescue for handling this one. This Gem performs well while comparing to other Gems in truncating the html content, which is additional advantage of using this one.

This is how truncato gives output

Truncato.truncate("The Rails philosophy includes two major guiding principles: <strong>Don't Repeat Yourself:</strong>", max_len
gth: 70)

"The Rails philosophy includes two major guiding principles: <strong>Do...</strong>"

The HTML tag is smartly retained here even though it truncate the text with in it.

Prompting user confirmation in stimulus-reflex

Shivashankar — Thu, 11 Jun 2020 09:23:20 +0000

Introduction

StimulusReflex along with cable_ready is a wonderful option for creating reactive application.

One issue I face is how to prompt a user before deleting a record. This post is about how to deal this one.

Assume we have tasks list as follows and we need to prompt the user to confirm when he/she tries to remove a record.

Title	Status	Remove
Fix homepage css issue	Mark as resolved	Remove
Add new banner	Mark as resolved	Remove
Iphone support	Resolved	Remove

Step: 1: create scaffold and migrate

$ rails g scaffold tasks title status
$ rake db:migrate

Step: 2 add stimulus_reflex and cable ready gems in `Gemfile`

gem 'cable_ready'
gem "stimulus_reflex", "~> 3.2"

 $ bundle install

Step: 3 update app/channels/application_cable/connection.rb

module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    private
      def find_verified_user
        if verified_user = User.find_by(id: cookies.encrypted[:user_id])
          verified_user
        else
          reject_unauthorized_connection
        end
      end
  end
end

Step: 4 create tasks channel

$ rails g channel Tasks

Step: 5 update `app/channels/tasks_channel.rb`

class TasksChannel < ApplicationCable::Channel
  def subscribed
    stream_from "tasks"
  end
end

Step: 6 update `app/javascript/channels/tasks_channel.js`

import cableReady from 'cable_ready'
import consumer from "./consumer"

consumer.subscriptions.create("TasksChannel", {
  received(data) {
    if (data.cableReady) cableReady.perform(data.operations)
  }
});

Step: 7 generate tasks reflex

rails g stimulus_reflex Tasks

Step: 8 Update `app/reflexes/tasks_reflex.rb`

class TasksReflex < ApplicationReflex
  include CableReady::Broadcaster

  def update
    id = element.dataset[:id]
    task = Task.find(id)
    task.update(status: "resolved")

    cable_ready["tasks"].text_content(
      selector: "status-col-#{id}",
      text: 'Resolved'
    )
    cable_ready.broadcast
  end

  def remove(id)
    task = Task.find(id)
    task.destroy 

    # in views we have set id for each row
    # cable_ready["tasks"]- here `tasks` denote channel name

    cable_ready["tasks"].remove(
      selector: "row-#{id}"
    )
    cable_ready.broadcast
  end
end

Step: 9 Update `app/javascript/controllers/tasks_controller.js`

import ApplicationController from './application_controller'
export default class extends ApplicationController {
  remove(event) {
    event.preventDefault();
    // This is where we are prompting the user for confirmation
    const ok = confirm("Are you sure to mark the task as 'resolved'?")
    if(!ok){
      return false;
    }else{
      const el = event.currentTarget
      const id = el.getAttribute("data-id");
      this.stimulate("TasksReflex#delete", id)
    }
  }
}

Step: 9 Update `app/controllers/tasks_controller.rb`

   class TasksController < ApplicationController
     include CableReady::Broadcaster
   end

app/views/users/index.html.erb

<table>
  <thead>
   <tr> 
      <th>Title</th>
      <th>Status</th> 
      <th>Remove</th> 
   </tr>
  </thead> 
  <tbody>
    <% @tasks.each do |task| %>
      <!-- unique row id  -->
      <tr id="row-<%= task.id %>">
        <td><%= task.title %></td>
        <td id="status-col-<%= task.id %>">
          <!-- directly call StimulusReflex -->
          <%= link_to 'Mark as resolved', '#',  data:{reflex: 'click->TasksReflex#update', id: task.id} %>
        </td>
        <td data-controller="tasks">
          <!-- Call controller instead of Reflex to show confirmation --> 
          <%= link_to 'Remove', '#', data:{action: "click->tasks#remove", id: task.id} %> 
        </td>
      </tr>
    <% end %>
  </tbody> 
</table>

Note: We need to use controller i.e data-action instead of data-reflex in links to show confirmation.

Rails 6 - using images with webpacker and asset pipeline

Shivashankar — Wed, 10 Jun 2020 19:25:07 +0000

Introduction:

Rails 6 by default now bundled with webpacker. Developers have choice to go for webpacker alone to use the images, css and js.

But there are cases where developers have to use both asset pipeline and webpacker.

The post is about how to deal these two things together, especially for the images.

Step: 1 - update application layout to include stylesheet_pack_tag

   <head>
     <%= stylesheet_link_tag 'application', media: 'all' %>
     <%= stylesheet_pack_tag 'application', media: 'all' %>
   </head>

Step: 2 - create folder structure as follows in `app/javascript`

app/javascript/
├── channels
│   ├── consumer.js
│   └── index.js
├── images
│   ├── 1.jpeg
│   ├── 2.jpeg
│   └── 3.jpeg
├── packs
│   └── application.js
└── src
    ├── custom.js
    └── stylesheets
        ├── _custom.scss
        └── application.scss

Assume we have few images 1.jpeg, 2.jpeg, 3.jpeg in images
folder.

Step: 3 - update `src/stylesheets/application.scss` as follows

@import '_custom';

Step: 4 - update `packs/application.js` as follows

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")

// add these 2 lines
import 'src/stylesheets/application'
const images = require.context('../images', true)

Step: 5 - update `config/webpacker.yml` as follows

default: &default
...
...
// update: resolved_paths: [] as follows
resolved_paths: ['app/javascript/images', 'app/assets/images']
...

Now we are good to use images from both folders app/assets/images and app/javascript/src/images.

1. Using images in webpack css file (here: app/javascript/src/stylesheets/_custom.scss)

/* assume 1.jpeg present in app/javascript/src/images folder */
body{
  background-color: green;
  background-image: url("~1.jpeg");
}

/* assume lake.jpeg present in app/assets/images folder */
div{
  background-color: red;
  background-image: url("~lake.jpeg");
}

That's all. Now we can use both asset pipeline images and
webpack images together in our css.

2. Using images in rails views

# This is how we need to call image from app/javascript/src/images/2.jpeg path
<%= image_pack_tag "media/images/2.jpeg" %>

# This is normal way to call image present in app/assets/images folder.
<%= image_tag "lake.jpeg" %>

Note: In case if we need to share a same image between asset pipeline and webpack, then it is good to place the image in app/assets/images folder itself. It makes our life easy to call them in both asset pipeline css, views and webpacker js or css easily.

Forem: Shivashankar

RSpec - test console input and output

Testing gets input

Testing puts

rails 6: Prevents logging sensitive info accidentally

Introduction

Solution

Using ruby reduce method for refactoring.

Using ruby 'reduce' method for refactoring our frequently used code.

StimulusReflex: Working with user roles in rails views

Introduction

Using created_at field to improve pagination performance

Introduction

Using Splat (*) operator in Active record Query

Introduction

Case 2 : How about searching fields with different data types

Catch unsafe rails db migrations with strong_migrations gem

Introduction

Step: 1 Add strong_migrations to Gemfile

Step 2: checking the strong migrations

Adding column with default value

Gem to truncate HTML strings efficiently ...

Prompting user confirmation in stimulus-reflex

Introduction

Step: 1: create scaffold and migrate

Step: 2 add stimulus_reflex and cable ready gems in Gemfile

Step: 3 update app/channels/application_cable/connection.rb

Step: 4 create tasks channel

Step: 5 update app/channels/tasks_channel.rb

Step: 6 update app/javascript/channels/tasks_channel.js

Step: 7 generate tasks reflex

Step: 8 Update app/reflexes/tasks_reflex.rb

Step: 9 Update app/javascript/controllers/tasks_controller.js

Step: 9 Update app/controllers/tasks_controller.rb

Rails 6 - using images with webpacker and asset pipeline

Introduction:

Step: 1 - update application layout to include stylesheet_pack_tag

Step: 2 - create folder structure as follows in app/javascript

Step: 3 - update src/stylesheets/application.scss as follows

Step: 4 - update packs/application.js as follows

Step: 5 - update config/webpacker.yml as follows

1. Using images in webpack css file (here: app/javascript/src/stylesheets/_custom.scss)

2. Using images in rails views

Step: 1 Add strong_migrations to `Gemfile`

Step: 2 add stimulus_reflex and cable ready gems in `Gemfile`

Step: 5 update `app/channels/tasks_channel.rb`

Step: 6 update `app/javascript/channels/tasks_channel.js`

Step: 8 Update `app/reflexes/tasks_reflex.rb`

Step: 9 Update `app/javascript/controllers/tasks_controller.js`

Step: 9 Update `app/controllers/tasks_controller.rb`

Step: 2 - create folder structure as follows in `app/javascript`

Step: 3 - update `src/stylesheets/application.scss` as follows

Step: 4 - update `packs/application.js` as follows

Step: 5 - update `config/webpacker.yml` as follows