This guide is part two of a three-part series on building a modern single-page application with Ruby on Rails and Inertia.js. In this article, we’ll dive into implementing CRUD functionality.

Part 1:
We set up a Rails-Inertia-React environment with basic routing, responses, and hot reloading to streamline frontend development.

Part 3: We’ll explore additional features, including reviewing Inertia requests, implementing nested routing, generating JS routes, and adding serializers to refine and complete our app.

Source code: https://github.com/greybutton/rails_inertia_blog

Implementing CRUD

1. Setup Models and Controllers

Stop the app from the previous step Ctrl+C. This section covers the setup for an Article and Comment model, along with their associated controllers and migrations.

# app/controllers/web/application_controller.rb
class Web::ApplicationController < ApplicationController
end

# app/controllers/web/articles_controller.rb
class Web::ArticlesController < Web::ApplicationController
end

Web::ApplicationController: A base controller under the Web namespace.
Web::ArticlesController: Handles article-related actions under the web/articles route.

Routes: Add a namespace for web, with resources for articles:


# config/routes.rb
namespace :web do
  resources :articles
end

Generate Article Model. This command creates an Article model with title and body fields:


docker compose run --rm web bash -c "rails generate model Article title:string body:text"

Generate Comment Model. Create a Comment model with fields for commenter and body, as well as a reference to article:


docker compose run --rm web bash -c "rails generate model Comment commenter:string body:text article:references"

Apply the migrations to create the articles and comments tables:


docker compose run --rm web bash -c "rails db:migrate"

Add validations and associations to the Article model to ensure each article has a title and body, and that the body has a minimum length of 10 characters. Update app/models/article.rb as follows:

class Article < ApplicationRecord
  has_many :comments

  validates :title, presence: true
  validates :body, presence: true, length: { minimum: 10 }
end

Keep app/models/comment.rb unchanged, as it already has the necessary association.

Use the following commands to start a shell session in the web container, open the Rails console, and create a sample Article record:

# Start a shell in the web container
docker compose run --rm web bash

# Open Rails console
rails console

# Create a sample article
Article.create(title: "Hello Rails", body: "I am on Rails!")

# Exit the rails console
exit

# Exit the web container
exit

This completes the Setup Models and Controllers section. Your Rails app now includes models with validations, associations, and a basic test for creating records in the Rails console.

2. Showing a List of Articles

Here’s how to display a simple list of articles. In this setup, we’re just rendering the titles of each article. We’ll expand on this with full CRUD actions in the following sections and update the list view accordingly.

1. Update the ArticlesController

Add an index action in Web::ArticlesController to fetch all articles and render them using Inertia:

# app/controllers/web/articles_controller.rb
class Web::ArticlesController < Web::ApplicationController
  def index
    @articles = Article.all

    render inertia: "articles/Index", props: {
      articles: @articles,
    }
  end
end

2. Create the Index Component for Articles

This React component displays the list of articles, using each article’s title as a list item:

// app/javascript/packs/web/articles/Index.jsx
import React from "react";

const Articles = ({ articles }) => (
  <>
    <h1>Articles</h1>
    <ul>
      {articles.map((article) => (
        <li key={article.id}>{article.title}</li>
      ))}
    </ul>
  </>
);

export default Articles;

Start the application and open http://localhost:3000/web/articles to see the list of articles.

At this point, you should see a simple list of articles displayed on the page.

3 Showing a Single Article

To make each article in the list clickable, we’ll add a link using web_article_path, which generates URLs in the format /web/articles/$ID. This allows users to click on an article and view its details.

1. Update ArticlesController to Add Link in Props

Modify the index action to include web_article_path for each article. Additionally, add a show action to handle displaying individual articles:

# app/controllers/web/articles_controller.rb
class Web::ArticlesController < Web::ApplicationController
  def index
    @articles = Article.all

    render inertia: "articles/Index", props: {
      articles: @articles.map do |article|
        article.attributes.merge(
          web_article_path: web_article_path(article),
        )
      end,
    }
  end

  def show
    @article = Article.find(params[:id])

    render inertia: "articles/Show", props: {
      article: @article,
    }
  end
end

Here’s why we do this:

  • Purpose: By adding web_article_path directly to each article in the @articles array, we make it easy to pass a pre-built link to each article directly from the server.
  • Flexibility: This approach allows the front-end to simply use web_article_path without needing to construct URLs manually. This keeps the front-end code simpler and focused only on rendering, while the Rails backend handles URL generation.
  • Consistency: By using Rails path helpers like web_article_path, we maintain consistency with the Rails routing system, ensuring that if routes change in the future, they only need to be updated in one place.

2. Update the Index Component to Add Links

In the Index component, wrap each article title in a component from Inertia. This will enable navigation without a full page reload:

// app/javascript/packs/web/articles/Index.jsx
import React from "react";
import { Link } from "@inertiajs/react";

const Articles = ({ articles }) => (
  <>
    <h1>Articles</h1>
    <ul>
      {articles.map((article) => (
        <li key={article.id}>
          <Link href={article.web_article_path}>{article.title}</Link>
        </li>
      ))}
    </ul>
  </>
);

export default Articles;

3. Create the Show Component for Article Details

The Show component renders the title and body of a single article:

// app/javascript/packs/web/articles/Show.jsx
import React from "react";

const Article = ({ article }) => (
  <>
    <h1>{article.title}</h1>
    <p>{article.body}</p>
  </>
);

export default Article;

Open http://localhost:3000/web/articles to view the list of articles. Clicking on an article will navigate to its detail page, for example, http://localhost:3000/web/articles/1.

4 Creating a New Article

In this section, we’ll add the ability to create a new article. Here’s how to set up the new and create actions and a form for submitting new articles.

1. Update ArticlesController

new action: Initializes a new article and renders the `New` component.
create action: Attempts to save the article and redirects back to the article list if successful or re-renders the form with errors if unsuccessful.

# app/controllers/web/articles_controller.rb
class Web::ArticlesController < Web::ApplicationController
  def index
    @articles = Article.all

    render inertia: "articles/Index", props: {
      articles: @articles.map do |article|
        article.attributes.merge(
          web_article_path: web_article_path(article),
        )
      end,
      new_web_article_path: new_web_article_path,
    }
  end

  def new
    @article = Article.new

    render inertia: "articles/New", props: {
      article: @article,
      web_articles_path: web_articles_path,
    }
  end

  def create
    @article = Article.new(article_params)

    if @article.save
      redirect_to web_articles_path
    else
      redirect_to new_web_article_path, inertia: { errors: @article.errors }
    end
  end

  private

  def article_params
    params.require(:article).permit(:title, :body)
  end
end

This addition passes the new_web_article_path to the front end, allowing a link to the “New Article” page without hardcoding the path in JavaScript. Just like with web_article_path, this makes routing dynamic and centralized, keeping URL generation within Rails and reducing the chance of inconsistencies.

2. Update the Index Component to Add a “New Article” Link

// app/javascript/packs/web/articles/Index.jsx
import React from "react";
import { Link } from "@inertiajs/react";

const Articles = ({ articles, new_web_article_path }) => (
  <>
    <h1>Articles</h1>
    <ul>
      {articles.map((article) => (
        <li key={article.id}>
          <Link href={article.web_article_path}>{article.title}</Link>
        </li>
      ))}
    </ul>
    <Link href={new_web_article_path}>New Article</Link>
  </>
);

export default Articles;

3. Create the New Component for Adding Articles

The New component renders the article form. The Form component is reused to handle article creation.

// app/javascript/packs/web/articles/New.jsx
import React from "react";
import { Link } from "@inertiajs/react";

import Form from "./_Form";

const New = ({ article, web_articles_path }) => {
  const handleSubmit = (form) => {
    form.post(web_articles_path);
  };

  return (
    <>
      <h1>New Article</h1>
      <Form
        article={article}
        onSubmit={handleSubmit}
        submitText="Create Article"
      />
      <Link href={web_articles_path}>List Articles</Link>
    </>
  );
};

export default New;

4. Create the _Form Component for Article Submission

// app/javascript/packs/web/articles/_Form.jsx
import React from "react";
import { useForm } from "@inertiajs/react";

const Form = ({ article, onSubmit, submitText }) => {
  const form = useForm({
    title: article.title || "",
    body: article.body || "",
  });
  const { data, setData, processing, errors } = form;

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(form);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <input
          type="text"
          value={data.title}
          onChange={(e) => setData("title", e.target.value)}
        />
        {errors.title && <div>{errors.title}</div>}
      </div>
      <div>
        <input
          type="textarea"
          value={data.body}
          onChange={(e) => setData("body", e.target.value)}
        />
        {errors.body && <div>{errors.body}</div>}
      </div>
      <button type="submit" disabled={processing}>
        {submitText}
      </button>
    </form>
  );
};

export default Form;

– Open http://localhost:3000/web/articles
– Click “New Article” to open the form.
– Try creating an article with a short body (fewer than 10 characters). You’ll see a validation error, showing that the Article model requires the body to meet the minimum length requirement.
– Once you correct the errors, you can successfully create a new article and view it in the list.

This setup ensures that URLs and validation errors are generated consistently, and it keeps the logic for routing and validation primarily within Rails, simplifying front-end code and making future updates easier.

5 Updating an Article

This section covers the setup for editing an article. We’ll add the edit and update actions in the controller, an edit form, and a link to navigate to the edit page.

1. Update ArticlesController

show action: Add edit_web_article_path to the props to provide a link to the edit page.
edit action: Initializes the article for editing and renders the Edit component.
update action: Attempts to update the article with submitted parameters, redirects to the article page if successful, or re-renders the form with errors.

# app/controllers/web/articles_controller.rb
class Web::ArticlesController < Web::ApplicationController
  # existing actions...

  def show
    @article = Article.find(params[:id])

    render inertia: "articles/Show", props: {
      article: @article,
      edit_web_article_path: edit_web_article_path(@article),
    }
  end

  def edit
    @article = Article.find(params[:id])

    render inertia: "articles/Edit", props: {
      article: @article,
      web_article_path: web_article_path,
    }
  end

  def update
    @article = Article.find(params[:id])

    if @article.update(article_params)
      redirect_to web_article_path(@article)
    else
      redirect_to edit_web_article_path, inertia: { errors: @article.errors }
    end
  end

  private

  def article_params
    params.require(:article).permit(:title, :body)
  end
end

2. Edit Component for Editing Articles

The Edit component displays a form for updating an article, reusing the _Form component to handle data entry and submission.

// app/javascript/packs/web/articles/Edit.jsx
import React from "react";

import Form from "./_Form";

const Edit = ({ article, web_article_path }) => {
  const handleSubmit = (form) => {
    form.put(web_article_path);
  };

  return (
    <>
      <h1>Edit Article</h1>
      <Form
        article={article}
        onSubmit={handleSubmit}
        submitText="Update Article"
      />
    </>
  );
};

export default Edit;

3. Show Component – Add Edit Link

Update the Show component to display an “Edit Article” link, allowing users to navigate to the edit form.

// app/javascript/packs/web/articles/Show.jsx
import React from "react";
import { Link } from "@inertiajs/react";

const Article = ({ article, edit_web_article_path }) => (
  <>
    <h1>{article.title}</h1>
    <