DEV Community: James Garcia

How to use Inertia with Ruby on Rails and Vue

James Garcia — Thu, 12 Nov 2020 01:35:53 +0000

What is Inertia

It is a JavaScript library that allows you to use modern JavaScript frameworks (React, Vue, and Svelte) with fullstack frameworks (Laravel, Rails, and Django) without needing to build out an API. You can build a monolith and use Vue for the view layer. You can also think of it as a replacement for Redux or Vuex, which are well-known routers for the React and Vue. You can read more about Inertia here I appreciate Jonathan Reinink, the ceator, for all the hard work he has put into this project. I also want to mention there is a helpful community in the discord.

What we will build

We are going to build a simple note taking app. A user will be able to create, read, update, and delete (CRUD) notes. At the end will implement authentication with Devise, and then make it where a user can only perform CRUD on their own notes. You can find the code for the completed sample project here

Let's start

The first thing we will do is create a new folder for our app. Open the terminal. Make a new folder by running.
mkdir inertiaapp
Change into the new folder.
cd inertiaapp
Create a new rails app and add the flag to not include Turbolinks.
rails new . --skip-turbolinks
Why are we not including Turbolinks? It is because Turbolinks is not compatible with Inertia so you don't need it. However, with Turbolinks being integrated with Rails hope is not lost. So, if you have an app that you want to migrate over to Inertia, and you have Turbolinks, you can disable Turbolinks for any responses sent to Inertia. I can give an example of how to do this during the Devise section. Test that the app was created successfully. In the terminal run.
rails s
Open the browser and navigate to
http://localhost:3000/

Add Vue

We could have added Vue when we created the app by including the flag --webpacker=vue, but I wanted to show you the following way for anyone that has an existing project. In your terminal run.
rails webpacker:install:vue
Open the your code editor and open the "inertiaapp" folder. I am using VS Code. The above command created a few files and inserted some code in some files. As you can see in the terminal output.

We need to delete app.vue and hello_vue.js files that were created because we will not be using them. These were created in app/javascript and app/javascript/packs folders respectively. We still need to initialize Vue and this will be done app/javascript/packs/application.js. Add the following code below the require statements.

// app/javascript/packs/application.js
...
import { App, plugin } from '@inertiajs/inertia-vue'
import Vue from 'vue'

Vue.use(plugin)

const el = document.getElementById('app')

new Vue({
  render: h => h(App, {
    props: {
      initialPage: JSON.parse(el.dataset.page),
      resolveComponent: name => require(`../Pages/${name}`).default,
    },
  }),
}).$mount(el)

This will initialize Vue. It will look for a root element with the ID of "app" to render the views. This is the same as a regular Vue app, but instead of using App.vue page Inertia will use Rails application.html.erb layout page. The Inertia rails adapter will handle creating and adding the ID "app". The initialPage is looking for a data attribute called page on the root element. Basically this will be where the response from the controller is stored. The next item to point out is the resolveComponent, it will look at the Pages directory for the views. Create the Pages folder in the app/javascript folder. You can change the location of the folder just be sure update the resolveComponent require path. We will be adding the Notes views later.

Add Inertia

Time for some Inertia. At this point our app is broken because we are trying to Import Inertia on the client side, which we have not added. We can start with adding Inertia the client-side. In your terminal run.
yarn add @inertiajs/inertia @inertiajs/inertia-vue @inertiajs/progress
This will add Inertia, Inertia-vue, and progress bar libraries to our package.json. Inertia has an optional progress bar library that will show as a loading indicator. We need to add the following to application.js under the other imports. This will initialize the progress bar.

// app/javascript/packs/application.js
...
import { InertiaProgress } from '@inertiajs/progress'
InertiaProgress.init()

Next up is setting up the server side. Add the Inertia gem by running the command in the terminal.
bundle add 'inertia_rails'
This will add the latest version of the gem to the Gemfile and install. We have to change the application.html.erb and update the javascript_pack_tag to add defer: true.
<%= javascript_pack_tag 'application', defer: true %>
This will cause the script to be executed after the page has been parsed. If this is not added then it may will show a blank page with error an Error in render: "TypeError: Cannot read property 'dataset' of null". Not fun to debug. Note, the following this is optional, but you can make some configuration changes to Inertia by using an initializer. Create a inertia_rails.rb file and add the following code.

# config/initializers/inertia_rails.rb
InertiaRails.configure do | config |
  config.version = '1.0' # used for asset verioning
  # config.layout = 'some_other_file' # use this to change the default layout file that inertia will use. Default it uses application.html.erb.
end

If you do add/update this initializer remember to restart the rails server.

Add Tailwindcss

This step is optional, but I will be adding Tailwindcss to my project to for styling. Open your terminal run the commands.
yarn add tailwindcss
npx tailwindcss init --full
The first will add tailwind to the project and the second will scaffold a tailwind.config.js file. The tailwind.config.js file is used to customize your style theme. With the flag --full it will add all of Tailwind defaults, but you can make any changes you want to the theme. Next we need to add Tailwind to the postcss.config.js file.

// postcss.config.js
module.exports = {
  plugins: [
    ...
    require('tailwindcss'),
    require('autoprefixer'),
    ...
  ]
}

Create a stylesheets folder under app/javascript folder. Then create an application.scss file in the app/javascript/stylesheets folder. Open application.scss and add the following lines.

// app/javascript/stylesheets/application.scss
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Open application.js and add the following line.

// app/javascript/packs/application.js
...
import "stylesheets/application"

One last update, open application.html.erb and change the following lines so that the views can use the stylesheets in the app/javascript/stylesheets folder. I also added some Tailwind classes to the body. Note, moving forward all classes will be Tailwind unless otherwise specified.

# app/views/layouts/application.html.erb
<head>
...
<%#= stylesheet_link_tag 'application', media: 'all' %> # delete or comment out this link as we will not use the asset pipeline for styles.
  <%= stylesheet_pack_tag 'application' %>
...
</head>
  <body class="container bg-gray-200 mx-auto">
    <%= yield %>
  </body

Add Home

We are going to add a home page to test the inertia render and styles. Add a pages_controller.rb in our app/controllers folder. Open the pages_controller.rb and add the following action.

# app/controllers/pages_controller.rb
def home
  render inertia: 'Home', props: {}
end

Open routes and add the root path.

# config/routes.rb
root 'pages#home

Add the Home.vue page to app/javascript/packs/Pages.

// app/javascript/packs/Pages/Home.vue
<template>
  <div>
    <h1 class="text-2xl text-center">Home Page</h1>
  </div>
</template>

Restart the rails server and test by going to the localhost:3000 and you should see the text "Home Page".

Add Notes

Now that we have Inertia wired up and working we can move on to adding notes. To speed up the tutorial I will use rails scaffolding. We can run the following command in the terminal to scaffold notes.
rails g scaffold note title:string content:text
Run the migrate to create the Note table
rails db:migrate
Restart your server and navigate to localhost:3000/notes and test that you get the new note index page.

You can test by creating a note, and all should work as you would expect. This is nice because rails views and Inertia views are coexisting. So if you have an existing app this allows you to migrate in phases.

Note Index

We will now migrate over the Note Index to show the vue page. Open notes_controller.rb, and update the index method.

# app/controllers/notes_controller.rb
def index
  notes = Note.all
  render inertia: 'Notes/Index', props: {
    notes: notes.as_json(only: [:id, :title, :content])
  }
end

The above will retrieve all notes. Next we create Inertia's render function and pass the location of the Vue page, and props. Props is data that will be passed to our Vue page in json format. The as_json parameter (only: [:id ...]) is optional, but recommended because all data passed and is visible to the client-side. Also the more data you pass it could impact performance. Now add a Notes folder to javascript/Pages folder and then add Index.vue to the javascript/Pages/Notes folder. Open the Index.vue file and add the following.

// app/javascript/Pages/Notes/Index.vue
<template>
  <div class="mt-6">
    <h2 class="text-2xl text-center">Notes</h2>
    <a href="/notes/new" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">New Note</a>
    <table class="table-auto bg-white mx-auto w-full mt-4 shadow">
      <thead>
        <tr>
          <th class="border px-4 py-2">Title</th>
          <th class="border px-4 py-2">Content</th>
          <th class="border px-4 py-2">Action</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="note in notes" :key="note.id">
          <td class="border px-4 py-2">{{ note.title }}</td>
          <td class="border px-4 py-2">{{ note.content}}</td>
          <td class="border px-4 py-2">Show</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    props: {
      notes: {
        type: Array,
        required: true,
      }
    }  
  }
</script>

I did not add a link to show the note yet. I will cover it later with Inertia links. Test going to localhost:3000/notes. If you get an error of "uninitialized constant NotesController" you may have to restart server.

Note New

Next we will migrate the Note new. Open notes_controller.rb, and update both the new and create actions.

# app/controllers/notes_controller.rb
...
  def new
    note = Note.new
    render inertia: 'Notes/New', props: {
      note: note.as_json
    }
  end

  def create
    @note = Note.new(note_params)
    if @note.save
      redirect_to notes_path, notice: 'Note was successfully created.'
    else
      redirect_to new_note_path, notice: 'Note was not created.'
    end
  end
...

Add New.vue and Form.vue files to the javascript/Pages/Notes folder. Open the New.vue file and add the following.

// javascript/Pages/Notes/New.vue
<template>
  <div class="mt-5">
    <h2 class="text-2xl text-center">New Notes</h2>
    <NoteForm v-model="form" @submit="submit" />
  </div>
</template>

<script>
import NoteForm from './Form'
  export default {
    components: {
      NoteForm
    },
    props: {
      note: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        form: this.note
      }
    },
    methods: {
      submit() {
        // This is in a meta tag located within the head tags
        var token = document.querySelector('meta[name="csrf-token"]').content
        this.$inertia.post('/notes', this.form,
         {
          headers: { 'X-CSRF-Token': token }
         })
      }
    }
  }
</script>

This is a standard Vue page. The one thing I wanted to point out is the submit function. You will notice that we are using this.$inertia.post to send data to the controller. This is Inertia's implementation of an ajax request. You will need to get the csrf-token from the head tag of the html page and pass it in the header with request. If you do not pass the the token you will receive an "ActionController::InvalidAuthenticityToken" error. Next open Form.vue and add the following.

// javascript/Pages/Notes/Form.vue
<template>
  <form @submit.prevent="$emit('submit')" class="rounded-sm bg-white shadow px-8 py-6">
    <label for="title" class="block text-gray-700 text-sm font-bold mb-2">Title</label>
    <input type="text" id="title" v-model="form.title" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" />
    <label for="content" class="block text-gray-700 text-sm font-bold mb-2">Content:</label>
    <textarea name="content" id="content" cols="30" rows="10" v-model="form.content" class="appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea> 
    <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Submit</button>
    <a href="/notes" role="button" class="inline-block align-baseline font-bold ml-2 text-sm text-gray-500 hover:text-gray-800">Cancel</a>
  </form>
</template>

<script>
  export default {
    props: {
      value: {
        type: Object,
        required: true
      }
    },
    computed: {
      form: {
        get() {
          return this.value
        },
        set(val) {
          this.$emit('input', val)
        }
      }
    }
  }
</script>

You can test creating a new note. If you get any errors, remember to restart the server. I have found that some errors will only clear up after a restart. One thing to bring up now is Form validation and errors. If you submit an empty title or content it will create a note with empty values. I want my note to require both fields. Open note.rb and add the following.

# app/models/note.rb
class Note < ApplicationRecord
  validates :title, presence: true
  validates :content, presence: true
end

Now if you create a note without a title or content, nothing will happen. You stay on the New Note form, and no message appears from the validation errors. We can work on that next. Inertia has a way to share data which we can use to report errors and later flash messages. We will put this code in a concern. Create a file called Inertiable.rb in app/controllers/concerns folder and add the following.

# app/controllers/concerns/Inertiable.rb
require 'active_support/concern'

module Inertiable
  extend ActiveSupport::Concern

  included do
    inertia_share errors: -> {
      session.delete(:errors) || []
    }
  end

  def redirect_to(options = {}, response_options = {})
    if (errors = response_options.delete(:errors))
      session[:errors] = errors
    end

    super(options, response_options)
  end
end

We create shared data errors that can be accessed in the Vue page. We override the default redirect_to that is used in the controller to store the errors in a session. So that all controllers have access to the new Inertiable.rb add it to the Application controller.

# app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  include Inertiable
end

Next change the note create method to include the error in the redirect_to.

#app/controllers/notes_controller.rb
  def create
    note = Note.new(note_params)
    if note.save
      redirect_to notes_path, notice: 'Note was successfully created.'
    else
      redirect_to new_note_path, errors: note.errors 
    end
  end

Next create the FlashMessages.vue in app/javascript/Shared folder.

// app/javascript/Shared/FlashMessages.vue
<template>
  <div v-if="show">
    <div v-if="Object.keys($page.props.errors).length > 0" class="bg-red-100 border-t-4 border-red-500 rounded-b text-red-900 px-4 py-3 shadow-md" role="alert">
      <div class="flex relative">
        <div class="py-1"><svg class="fill-current h-6 w-6 text-red-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
        <div>
          <p v-for="(value, propertyName) in $page.props.errors" :key="propertyName" class="font-bold">{{ capitalize(propertyName) }}: {{ value[0] }}</p>
        </div>
        <button @click="show = false" class="inline absolute top-0 right-0 px-4 py-3 ">
          <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
        </button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: true
      }
    },
    methods: {
      capitalize(word) {
        return word.charAt(0).toUpperCase() + word.slice(1)
      },
    }
  }
</script>

The only thing to note here is that I had to add a method to capitalize the first letter of the Key of the message object. Now we can add the FlashMessages component to the New note page.

// app/javascript/Pages/Notes/New.vue
<template>
  <div class="mt-5">
    <FlashMessages />
    <h2 class="text-2xl text-center">New Notes</h2>
    <NoteForm v-model="form" @submit="submit" />
  </div>
</template>

<script>
import FlashMessages from '@/Shared/FlashMessages'
import NoteForm from './Form'
  export default {
    components: {
      FlashMessages,
      NoteForm
    },
...
</script>

You may notice that we are using an alias "@" for the path when we import the FlashMessages. We need to make a change to the environment.js file, add the following.

// config/webpack/environment.js
...
const path = require('path')

environment.config.merge({
  resolve: {
    alias: {
      '@': path.resolve('app/javascript'),
      vue$: 'vue/dist/vue.runtime.esm.js',
    }
  }
})
...

Now that we have the errors shared data set up, let's include the regular flash messages. Open the Inertiable.rb file and add the following shared data inside the include do section.

# app/controllers/concerns/Inertiable.rb
  included do
    ...
    inertia_share flash: -> {
      {
        notice: flash.notice,
        alert: flash.alert
      }
    }
  end

Update the FlashMessage.vue file to show the success and alert messages.

// app/javascript/Shared/FlashMessages.vue
<template>
  <div v-if="show">
    <div v-if="$page.props.flash.success" class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md" role="alert">
      <div class="flex relative">
        <div class="py-1"><svg class="fill-current h-6 w-6 text-teal-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
        <div>
          <p>{{ $page.props.flash.success }}</p>
        </div>
        <button @click="show = false" class="inline absolute top-0 right-0 px-4 py-3 ">
          <svg class="fill-current h-6 w-6 text-teal-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
        </button>
      </div>
    </div>
    <div v-if="$page.props.flash.alert" class="bg-orange-100 border-t-4 border-orange-500 rounded-b text-orange-900 px-4 py-3 shadow-md" role="alert">
      <div class="flex relative">
        <div class="py-1"><svg class="fill-current h-6 w-6 text-orange-500 mr-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm12.73-1.41A8 8 0 1 0 4.34 4.34a8 8 0 0 0 11.32 11.32zM9 11V9h2v6H9v-4zm0-6h2v2H9V5z"/></svg></div>
        <div>
          <p>{{ $page.props.flash.alert}}</p>
        </div>
        <button @click="show = false" class="inline absolute top-0 right-0 px-4 py-3 ">
          <svg class="fill-current h-6 w-6 text-orange-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
        </button>
      </div>
    </div>
...

Then add the FlashMessages.vue component to the Note Index file.

// app/javascript/Pages/Notes/Index.vue
<template>
  <div class="mt-6">
    <FlashMessages />
    <h2 class="text-2xl text-center">Notes</h2>
...
<script>
import FlashMessages from '@/Shared/FlashMessages'
  export default {
    components: {
      FlashMessages
    },
...

Add Menu and Layout

Before we move onto the Note Edit I want to work on the navigation and layout for the client-side. The layout is to the client-side what application.html.erb is to the Rails views. It can be used to wrap the Vue page. Create a Layouts folder in the app/javascript folder. Next create a ApplicationLayout.vue file in the Layouts folder. Add the following to the ApplicationLayout.vue.

// app/javascript/Layouts/ApplicationLayout.vue
<template>
  <main>
    <Navigation />
    <FlashMessages />
    <section class="container mx-auto">
      <slot />
    </section>
  </main>
</template>

<script>
import FlashMessages from '@/Shared/FlashMessages'
import Navigation from '@/Shared/Navigation'
  export default {
    components: {
      FlashMessages,
      Navigation
    }
  }
</script>

We are going to use a slot which is similar to the <%= yield %> in the application.html.erb. We are importing the FlashMessages, and Navigation components. I removed the FlashMessages component from the pages that I had previously imported to. Next I will create the Navigation component. Note, remove the classes "container mx-auto" from the body tag of the application.html.erb since we are adding it here. Create a Navigation.vue inapp/javascript/Shared folder. Add the following.

// app/javascript/Shared/Navigation.vue
<template>
  <nav class="w-full flex justify-between bg-white py-4 px-8">
    <div>
      <span class="text-teal-500 font-bold">InertiaApp</span>
    </div>
    <div class="font-medium">
      <inertia-link href="/" class="text-gray-600 hover:text-gray-800 mr-2">Home</inertia-link>
      <inertia-link href="/notes" class="text-gray-600 hover:text-gray-800">Notes</inertia-link>
    </div>
  </nav>
</template>

Now we can test out wrapping our Pages with the ApplicationLayout. Open Home.vue and add the following to your script section.

// app/javascript/Pages/Home.vue
<script>
import Layout from '@/Layouts/ApplicationLayout' // add this line
  export default {
    layout: Layout // add this line
  }
</script>

Add these two layout lines to the Notes Index.vue and New.vue page.

Inertia Links

I want to take another detour to go over links and routes. Inertia has its own links that are called inertia-link. It is a wrapper around an anchor tag that prevents full page reloads. What I want to discuss is the href. You can use basic string path such as href="/notes" which will navigate to the Notes Index. What if we want to use named routes like we do on the sever-side, or edit a certain note by passing in the id such as :href="$route.edit_note(note.id)". Well, we can, by using gem called JsRoutes. We will use this gem to read the routes.rb file and generate a routes.js file that we can use on the client-side. Open your terminal and run.
bundle add "js-routes" --group "development"
This will install the js-routes gem. Next we need to create jsroutes.rb in the config/initializers folder. Add the following to the file.

# config/initializers/jsroutes.rb
JsRoutes.setup do |config|
  config.exclude = [/rails_/] # excludes rails generated routes
  config.compact = true       # removes the _path from the route name
  path = "app/javascript/packs"
  JsRoutes.generate!("#{path}/routes.js")
end

The will help to automatically generate the routes.js file when we start the server. Now when you add a new route to the routes.rb file and you restart the server the route will be added to the new routes.js file. The next thing is to add the routes to the top level of our client-side application so we can have access across the application. Open the application.js file and add the following.

// app/javascript/packs/application.js
...
import Routes from "./routes.js" // add this line
Vue.prototype.$routes = Routes // add this line

const el = document.getElementById('app')
...

Now we can test this out by updating the Note Index.vue page to add the inertia-link to each note. Open the Index.vue page in app/javascript/Pages/Notes folder and make the following change.

// app/javascript/Pages/Notes/Index.vue
...
<td class="border px-4 py-2">
  <inertia-link :href="$routes.note(note.id)">Show</inertia-link>
</td>
...

After you refresh the index page you can hover over the notes Show link and see that in the lower left corner the URL. Example you should see something like localhost:3000/notes/2 where the 2 is the id of the note. If you click on the Show link you will get this odd looking modal window that has the note show page. This is really an Inertia error window. It is happening because we are sending an Inertia request to the server-side, but we don't have an Inertia view for the show page. Which we can easily fix now and then move on to the Note Edit. Open the notes_controller.rb and update the Show action with the following.

# app/controllers/notes_controller.rb
  def show
    render inertia: 'Notes/Show', props: {
      note: @note.as_json(only: [:id, :title, :content])
    }
  end

Next add a Show.vue file to app/javascript/Pages/Notes folder. Add the following.

// app/javascript/Pages/Notes/Show.vue
<template>
  <div class="mt-6">
    <h2 class="text-2xl text-center">{{ note.title }}</h2>
    <article class="rounded-sm bg-white shadow px-8 py-6 my-4">
      {{ note.content}}
    </article>
  </div>
</template>

<script>
import Layout from '@/Layouts/ApplicationLayout'
  export default {
    props: {
      note: {
        type: Object,
        required: true
      }
    },
    layout: Layout,
  }
</script>

Now when you click on the Show link it will navigate to the Note Show.vue page.

Note Edit

On to the Note Edit. Open the notes_controller.rb and update the Edit and Update actions with the following.

# app/controllers/notes_controller.rb
  def edit
    render inertia: 'Notes/Edit', props: {
      note: @note.as_json(only: [:id, :title, :content])
    }
  end
  ...
  def update
    if @note.update(note_params)
      redirect_to notes_path, notice: 'Note was successfully update.'
    else
      redirect_to edit_note_path(@note), errors: @note.errors 
    end
  end

Now we need to create the Edit.vue. Add the Edit.vue page in the app/javascript/Pages/Notes folder. Add the following.

// app/javascript/Pages/Notes/Edit.vue
<template>
  <div class="mt-5">
    <h2 class="text-2xl text-center">Edit Note</h2>
    <NoteForm v-model="form" @submit="submit" />
  </div>
</template>

<script>
import NoteForm from './Form'
import Layout from '@/Layouts/ApplicationLayout'
  export default {
    components: {
      NoteForm
    },
    props: {
      note: {
        type: Object,
        required: true
      }
    },
    layout: Layout,
    data() {
      return {
        form: this.note
      }
    },
    methods: {
      submit() {
        this.$inertia.put(this.$routes.note(this.note.id), this.form)
      }
    }
  }
</script>

You will notice this is basically the same as the New.vue with the exception of the submit function. I am using this.$inertia.put instead of post. I removed the headers CSRF token. You can also remove the CSRF token code from the New.vue submit. Since this will be needed on each request we can make a couple of changes so that it is. Open application.js and add the following.

// app/javascript/packs/application.js
import axios from 'axios'
axios.defaults.xsrfHeaderName = "X-CSRF-Token"

Next open the Inertiable.rb and add the following.

# app/controllers/concerns/Inertiable.rb
  included do
    before_action :set_csrf_cookies
    ...
  end
  ...
  private

  def set_csrf_cookies
    cookies['XSRF-TOKEN'] = {
      value: form_authenticity_token,
      same_site: 'Strict'
    }
  end

I made an update the Notes Index.vue page to include an edit link for the note. Add the following under the Show link.

// app/javascript/Pages/Notes/Index.vue
...
<inertia-link :href="$routes.edit_note(note.id)">Edit</inertia-link>
...

Note Delete

The last CRUD action to work on is the delete. Open notes_controller.rb and update the delete action with the following.

# app/controllers/notes_controller.rb
  def destroy
    @note.destroy
    redirect_to notes_path, notice: 'Note was successfully destroyed.' 
  end

Next add a link to the Notes Index.vue page to delete the note. Open the Index page and add the following.

// app/javascript/Pages/Notes/Index.vue
...
          <td class="border px-4 py-2">
            <inertia-link :href="$routes.note(note.id)" class="text-blue-700 mr-2">Show</inertia-link>
            <inertia-link :href="$routes.edit_note(note.id)" class="text-green-700 mr-2">Edit</inertia-link>
            <a href="#" @click="onDelete(note.id)" class="text-red-700">Delete</a> <!-- add this link -->
          </td>
...
<script>
...
    methods: {
      onDelete(id) {
        this.$inertia.delete(this.$routes.note(id), {
          onBefore: () => confirm('Are you sure you want to delete this note?'),
        })
      }
    }
</script>

Add Devise

Using devise in this app will be pretty standard setup and configuration. I am adding as an extra, but also to point out a couple of items that may help you when using it with Inertia. I will run through the basics setup. Open terminal and run the following commands.
bundle add 'devise'
rails generate devise:install
rails g devise:views
rails generate devise User
rails db:migrate
rails g migration add_user_id_to_notes user_id:integer
rails db:migrate
Add the associations to the Note and User models.

# app/models/user.rb
class User < ApplicationRecord
  ...
  has_many :notes, dependent: :destroy
end

# app/models/note.rb
class Note < ApplicationRecord
  belongs_to :user
  ...
end

Update the notes_controller.rb to only allow the current user to manage their notes.

# app/controllers/notes_controller.rb
class NotesController < ApplicationController
  before_action :authenticate_user!
  ...

  def index
    notes = current_user.notes.all
    render inertia: 'Notes/Index', props: {
      notes: notes.as_json(only: [:id, :title, :content])
    }
  end
  ...
  def create
    note = current_user.notes.new(note_params)
    if note.save
      redirect_to notes_path, notice: 'Note was successfully created.'
    else
      redirect_to new_note_path, errors: note.errors 
    end
  end
  ...
  private

    def set_note
      @note = current_user.notes.find(params[:id])
    end
    ...
end

Note, I updated the devise views with the Tailwind css, but not going to add the changes here. Please see the repo for the changes. Next we will want to share the current users information with the client-side so we will update the Inertiable.rb file with the following.

# app/controllers/concerns/Inertiable.rb
  included do
    ...
    inertia_share auth: -> {
      {
        user: current_user.as_json(only: [:id, :email])
      }
    }
  end

This will share the current users id and email. Next we can update the Navigation.vue file with the following.

// app/javascript/Shared/Navigation.vue
...
    <div class="font-medium flex">
      <inertia-link href="/" class="text-gray-600 hover:text-gray-800 px-2 mr-2">Home</inertia-link>
      <span v-if="!$page.props.auth.user">
        <a :href="$routes.new_user_session()" class="text-gray-600 hover:text-gray-800 px-2">Sign In</a>
        <a :href="$routes.new_user_registration()" class="text-gray-600 hover:text-gray-800 px-2">Sign Up</a>
      </span>
      <span v-else>
        <inertia-link href="/notes" class="text-gray-600 hover:text-gray-800 px-2">Notes</inertia-link>
        <inertia-link :href="$routes.destroy_user_session()" method="delete" class="text-gray-600 hover:text-gray-800 px-2">Sign Out</inertia-link>
      </span>
    </div>
...

I am showing the different links based on if there is a current user stored in the "auth.user" shared data that we added in Inertiable.rb. We use anchor tags for both Sign in and Sign up because we are using rails views. We can use the inertia-link for the Sign out because there is no associated rails view.

I will not be migrating the devise views to client-side just show how you can have both client-side views and rails views. If you decide to migrate to the client-side, you will need to make your own sessions and registrations controllers to override the actions such as create, destroy and edit for registration with an Inertia render. One more note on devise if you use turbolinks you will run into an issue after submitting the sign up or sign in. The only way I have found to make it work is to override the sessions and registrations controllers and disable the turbolinks on the redirect_to. For example the sign in, I created the sessions controller and then added the following to the create action.

  def create
   self.resource = warden.authenticate!(auth_options)
   set_flash_message!(:notice, :signed_in)
   sign_in(resource_name, resource)
   redirect_to root_path, turbolinks: false
  end

The first three lines I copied from the device code, and then updated the redirect_to to add "turbolinks: false". Not ideal, but it worked.

Closing Thoughts/Summary

Inertia is a great project, and I covered the basics. I would encourage you to look over the Inertia documentation for more advance topics. Give it a try and let me know what you think. I want to thank Georg Ledermann for porting over the Inertia demo app to Rails, and so being helpful in answering my questions. If you have any questions please leave a comment and I will do my best to answer.

How to create a comment and reply system in Ruby on Rails

James Garcia — Fri, 30 Oct 2020 14:27:13 +0000

This is a tutorial about building a simple comment and reply system with Ruby on Rails. I was looking for a way to build this without a gem. Most tutorials use gems such as closure_tree, or ancestry. This seemed more than what I wanted. I was able to get some guidance from Nick Haskins the author of Playbook Thirty-nine and StackOverflow. You can find the completed project here.

Let's Start

We start off by creating a standard Ruby on Rails app. Create a folder called "commentapp". Open your terminal and run the following commands.
mkdir commentapp
Change into the "commentapp" folder
cd commentapp
Create the new rails app run
rails new .
Open the your code editor and open the "commentapp" folder. I am using VS Code. Test that the app was created successfully. In the terminal run.
rails s
Open the browser and navigate to http://localhost:3000/

Add Bootstrap

We are going to add Bootstrap for styling. This is an optional step. In your terminal run.
yarn add bootstrap
Open app/javascript folder and create a new folder called "stylesheets". Inside the "stylesheets" folder create a file called "application.scss". Open the "application.scss" file and add.



// app/javascript/stylesheets/application.scss
@import "bootstrap/scss/bootstrap";

Open application.js file and add.



// app/javascript/packs/application.js
import "../stylesheets/application.scss";

Open application.html.erb and add.



# app/views/layouts/application.html.erb
<%= stylesheet_pack_tag 'application' %>

Add Posts

Next we will scaffold the Posts. Open terminal and run.
rails g scaffold post title:string body:text
This will create several files and update the routes file for Post. We will only be working with a few of these files. The scaffold has created a migration file that will be used to create a table for the Post model. This located in db/migrate folder.



# db/migrate/<timestamp>_create_posts.rb
class CreatePosts < ActiveRecord::Migration[6.0]
  def change
    create_table :posts do |t|
      t.string :title
      t.text :body

      t.timestamps
    end
  end
end

This will create a Post table with columns for title and body. For the migration to take effect we will need to run.
rails db:migrate
If we run the app now we will still get the default "Yay! You’re on Rails!" page. We need to change the root path to be the Posts index page. This can be done by updating the routes file.



# config/routes.rb
root to: 'posts#index'

Start the rails server, if you stopped it, and then refresh http://localhost:3000/ now the page will show

Click on "New Post" and create a new post to give the app some content. At this point, if you click Create Post button without entering a Title or Body it will create an empty post. To not allow this to happen we need to add validation to the Post model.



# app/models/post.rb
class Post < ApplicationRecord
  validates :title, :body, presence: true 
end

I will add some styling with Bootstrap to some of the Post views. Before we can add styles we should delete the stylesheet that was generated when we created the scaffold. Unfortunately this stylesheet will be recreated each time we generate a scaffold. So if styles do not look correct when using Bootstrap it could be that the scaffolds.scss needs to be removed. Navigate to app/assets/stylesheets and delete scaffolds.scss file. We will start to add styles to the application.html.erb page.



# app/views/layouts/application.html.erb
  <body>
    <div class="container">
      <%= yield %>
    </div>
  </body>

Post index page.



# app/views/posts/index.html.erb
<p id="notice"><%= notice %></p>

<h1>Posts</h1>

<%= link_to 'New Post', new_post_path, class: 'btn btn-primary' %>
<hr>
<% @posts.each do |post| %>
  <div class="card">
    <div class="card-body">
      <h5 class="card-title"><%= link_to post.title, post_path(post) %></h5> # changed title to a link to show the post
      <p class="card-text"><%= truncate(post.body, length: 60) %></p>
      <%= link_to 'Edit', edit_post_path(post), class: 'card-link' %>
    </div>
  </div>
<% end %>

Post form partial



# app/views/posts/_form.html.erb
<%= form_with(model: post, local: true) do |form| %>
  <% if post.errors.any? %>
    <div id="error_explanation">
      <h4 class="text-danger"><%= pluralize(post.errors.count, "error") %> prohibited this post from being saved:</h4>

      <ul class="list-group">
        <% post.errors.full_messages.each do |message| %>
          <li class="list-group-item list-group-item-danger"><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="form-group">
    <%= form.label :title %>
    <%= form.text_field :title, class: 'form-control' %>
  </div>

  <div class="form-group">
    <%= form.label :body %>
    <%= form.text_area :body, class: 'form-control' %>
  </div>

  <%= form.submit "Save Post", class: 'btn btn-primary' %>
<% end %>

New post form



# app/views/posts/new.html.erb
<div class="card my-5">
  <div class="card-body">
    <h1>New Post</h1>

    <%= render 'form', post: @post %>

    <%= link_to 'Back', posts_path, class: 'btn btn-light mt-2' %>
  </div>
</div>

Post edit form



# app/views/posts/edit.html.erb
<div class="card my-5">
  <div class="card-body">
    <h1>Edit Post</h1>

    <%= render 'form', post: @post %>

    <div class="mt-2">
      <%= link_to 'Show', @post, class: 'btn btn-info mr-2' %>
      <%= link_to 'Destroy', @post, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-danger mr-2' %> # moved the destroy button from index to here (optional)
      <%= link_to 'Back', posts_path, class: 'btn btn-light' %>
    </div>
  </div>
</div>

Post show



# app/views/posts/show.html.erb
<div class="card my-5">
  <div class="card-body">
    <p id="notice"><%= notice %></p>

    <h1 class="text-center"><%= @post.title %></h1>
    <hr >
    <div class="my-4">
      <%= simple_format(@post.body) %>
    </div>

    <%= link_to 'Back', posts_path, class: 'btn btn-light' %>
  </div>
</div>

Comments

Next we will scaffold the Comments. Open terminal and run.
rails g scaffold comment body:text post_id:integer parent_id:integer
Again this will create several files, but we will only be working with a few. One thing to note is to delete the scaffolds.scss if you are using Bootstrap or some other CSS library.
For the migration to take effect we will need to run.
rails db:migrate
We will need to update the routes to nest the Comment within Post. Open the routes.rb file and make the following changes. This will cause the comments route to become similar to ../posts/1/comments/1.



# config/routes/rb
Rails.application.routes.draw do
  resources :posts do
    resources :comments
  end
  ...
end

Changes will need to be made to the Comment and Post models. With this change Comments belong to a Post and Post can have many Comments. Add the following to the Post model.



# app/models/post.rb
has_many :comments

Add the following to the Comments model.



# app/models/comments.rb
belongs_to :post
validates :body, presence: true

If you try going to any of the Comments routes they will not work as expected because of us nesting Comment within Post. To get this back to a working app we will first add a new comments form to the Post show.html.erb page.



# app/views/posts/show.html.erb
...
<div class="card my-1"> # place this card blow the post body.
  <div class="card-body">
    <p class="font-weight-bold">Comments</p>
    <%= form_with(model: [@post, @post.comments.build]) do |f| %>
      <div class="form-group">
        <%= f.label 'New comment' %>
        <%= f.text_area :body, class: 'form-control' %>
      </div>
      <%= f.submit 'Submit', class: 'btn btn-primary' %>
    <% end %>
  </div>
</div>

Now we need to update the Comments controller Create action.



# app/controllers/comments_controller.rb
def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.new(comment_params)

    respond_to do |format|
      if @comment.save
        format.html { redirect_to @post, notice: 'Comment was successfully created.' } # changed the redirect to @post
...

First we find the post by using the post_id that is sent with the params. Next update the @comment variable to create a new comment that will belong to the post. If you try to create a comment it will be created, but you will not know unless you check the database. To fix this we need to update the post show.html.erb. Below the Comments card add the following.



# app/show.html.erb
...
<%= render @post.comments %>

The above line will iterate over each comment using a comment partial. We will need to create the comment partial. Open app/views/comments and create a _comment.html.erb file. Add the following to the partial.



# app/views/comments/_comment.html.erb
<div class="card">
  <div class="card-body">
    <%= comment.body %>
  </div>
</div>

Add a comment and it will be added to the bottom of the post. You will notice that an empty card will appear below the new comment. For some reason a new comment is automatically built, but not created.

We need to wrap the comment partial within an unless condition only to show saved comments.



# app/views/comments/_comment.html.erb
<% unless !comment.persisted? %>
  <div class="card">
    ...
  </div>
<% end %>

Replies

We are now able to create post and comments so the next item to cover is replies. With my approach we will not be scaffolding replies. Replies are basically comments so we will reuse comments and make some additions. First let's make changes to the Comment model.



# app/models/comment.rb
class Comment < ApplicationRecord
  belongs_to  :post
  belongs_to  :parent, class_name: 'Comment', optional: true
  has_many    :replies, class_name: 'Comment', foreign_key: :parent_id, dependent: :destroy

  validates :body, presence: :true
end

We are creating a self-joining association with the Comment model. You can read more about it here in the Rails Guides. This will allow us to store replies in the comments table and will use the parent id column to store the comment id that the reply is associated with.
Next, we will update the comment partial to add a reply link and a loop to render the replies.



# app/views/comments/_comment.html.erb
      <%= comment.body %>
      <%= link_to 'reply', new_post_comment_path(@post, parent_id: comment.id), remote: true, class: 'd-block' %>
      </div>
  </div>
  <% if comment.replies.any? %>
    <% comment.replies.each do |reply| %> 
      <%= render partial: 'comments/reply', locals: { reply: reply } %>
    <% end %>
  <% end %>

We add the reply link with remote: true to let rails know this an Ajax call and we want to respond with JavaScript. The JavaScript will be used to insert a reply form on the Show page without refreshing the page. In the link we are passing params for post id and the parent id. Next we check the comment has any replies and if so loop through them using the reply partial. We will have to create the reply partial. Add the _reply.html.erb file in app/views/comments folder.



# app/views/comments/_reply.html.erb
<div class="card ml-5">
  <div class="card-body">
    <%= reply.body %>
  </div>
</div>

This will create another card below the comment and will have a left margin to push it over and looks like it belongs to the comment. We will not be able to see that until we can add a reply, which we can work on next. We will add a form partial for the replies. Add _reply_form.html.erb file in app/views/comments folder.



# app/views/comments/_reply_form.html.erb
<div class="card ml-5">
  <div class="card-body">
    <%= form_with(model: [@post, @comment]) do |f| %>
      <%= f.hidden_field :parent_id %>
      <div class="form-group">
        <%= f.label 'Reply' %>
        <%= f.text_area :body, class: 'form-control' %>
      </div>
      <%= f.submit 'Submit', class: 'btn btn-primary' %>
      <%= link_to 'Cancel', post_path(@post), class: 'btn btn-secondary' %>
    <% end %>
  </div>
</div>

We add a hidden field for the parent id, which will be filled from our New action in the Comments controller. The rest is pretty standard.
Now that we have the form created we need to update the New action in the Comments controller.



# app/controllers/comments_controller.rb
  def new
    @post = Post.find(params[:post_id])
    @comment = @post.comments.new(parent_id: params[:parent_id])
  end

This will build a new reply, which is really a new comment to pass to the reply form. Since we are passing the parent id it will fill the hidden field in the reply form. Because this comment has a parent id we know that it is a reply. Let's move on before I start confusing myself.
Since the reply link is an Ajax call the New action, we just updated, knows to respond to a JavaScript file with the same name as the action. Add a new.js.erb file to app/views/comments folder.



# app/views/comments/new.js.erb
document.querySelector("#reply-form-<%= @comment.parent_id %>").innerHTML = ("<%= j render 'reply_form', comment: @comment %>")

This will find the div with the ID of reply-form-<parent_id> and insert the reply form into the div. We need to create the div in the _comment.html.erb partial. Add the following to the _comment.html.erb just below the reply loop.



# app/views/comments/_comment.html.erb
  <div id="reply-form-<%= comment.id %>"></div>

This will be a placeholder for the reply form to be inserted. We dynamically build the id using the comment id, which will be the parent id for the reply. That is why in the new.js.erb we are using the @comment.parent_id. If you click on the reply link a reply form should appear below the comment. Once you have replies it will place the form below the last reply for the comment. Add a reply to a comment.

After creating a reply it will be added below the comment that it is associated with, but will also appear as a comment. That is because a reply is stored in the Comment database. To fix this we will need to update the _comment.html.erb partial to include another condition.



# app/views/comments/_comment.html.erb
<% unless comment.parent_id || !comment.persisted? %>

So now if a comment has a parent_id (meaning it is a reply) or it is not a saved comment then it will not show in the list of Comments only in the replies of the of the comment.

I hope this was helpful.

Credits
Playbook Thirty-nine by Nick Haskins
StackOverflow