Menu
← Back to all articles

Phlex components part 2: Routing and CMS integration

Juan Gallardo
Table of Contents

Come on and slam! And welcome to the JAM! (stack)

  • Our Rails app can be simple because we are not building a CMS in it. Rather, we are only displaying data from our database
  • Our Rails app can be even simpler because we don’t have user registration or management in it, it is done in our CMS
  • Only registered blog authors can log into our CMS and make changes to their content
  • Our Rails app serves real-time content from the database and is always up to date
  • Our Rails app, CMS, and database are all independent web services on Render.com managed by a blueprint in our code repository
  • There’s no need for API calls to our CMS from our Rails app because we can just read our data from our database directly
  • Directus CMS is a great CMS, why would we reinvent the wheel and roll our own. That doesn’t make sense

Here we will create the Article resource. Our app is only concerned with the R in CRUD. In other words, Read. We are providing a CMS via Directus for our users to Create, Update, and Delete Posts. Users will also be able to CRUD their own user/writer accounts in the CMS, which we will set up in a follow-up post.

It’s important to create tables and columns that match exactly to our deployed database as well as the fields that Directus uses for time-stamping our objects and keeping track of their publishing status.

1. Write an Article model

Let’s enforce our architecture decision with a read_only attribute. We don’t want any developer to accidentally introduce code that modifies our database

1
2
3
4
5
6
7

# /app/models/post.rb

class Article < ApplicationRecord
  def read_only?
    true
  end
end

2. Annotate models

When it comes to documentation, more is always better. Let’s automate some of this tedious process

Let’s install the anotaterb gem. We only need this in our development environment

  1. bundle add annotaterb --group "development"
  2. bundle update
  3. Run the installer to annotate every time we run a database migration. ./bin/rails generate annotate_rb:install
  4. Let’s configure annotate to sort database columns in alphabetical order because why not. change the following line in /.annotaterb.yml to :sort: true
  5. Later in this article, once you run your first migration. Your model file will look like this. Ain’t that nifty
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# /app/models/post.rb

# == Schema Information
#
# Table name: articles
#
#  id           :bigint           not null, primary key
#  content      :text
#  date_created :datetime
#  date_updated :datetime
#  sort         :integer
#  status       :string
#  title        :string
#
class Article < ApplicationRecord
  def read_only?
    true
  end
end

3. Routes

We only want two routes:

  1. /articles/ Which will display our Articles collection
  2. /articles/:id Which will display a particular Article. Except we’ll add some magic to show a url that includes the Article title
1
2
3
4
5
6
7
8
9
10
11
12

# /config/routes.rb

Rails.application.routes.draw do
  get "up", to: "rails/health#show", as: :rails_health_check

  root "pages#home"
  get "contact", to: "pages#contact"
  get "about", to: "pages#about"

  get "articles", controller: "articles", action: :index
  get "articles/:id", controller: "articles", action: :show, as: :article
end

An equally valid, less explicit, but more succinct way of doing this:

1
2
3
4
5
6
7
8
9
10
11

# /config/routes.rb

Rails.application.routes.draw do
  resources :articles, only: [:index, :show]
  
  get "up", to: "rails/health#show", as: :rails_health_check

  root "pages#home"
  get "contact", to: "pages#contact"
  get "about", to: "pages#about"
end

4. Controller

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# /app/controllers/articles_controller.rb

class ArticlesController < ApplicationController
  # GET /articles
  def index
    @articles = Article.all
    render Pages::Articles.new(articles: @articles)
  end

  # GET /articles/1
  def show
    @article = Article.find(params.expect(:id))
    render Pages::Article.new(article: @article)
  end
end

5. Views.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# /app/views/components/article/article.rb

class Components::Article < Components::Base
  def initialize(article:)
    @article = article
  end

  def view_template(&)
    div(class: "container") do
      h1 { @article.title }
      p { @article.content}
    end
  end
end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# /app/views/pages/article.rb

class Pages::Article < Pages::Base
  def initialize(article:)
    @article = article
    super()
  end

  def page_title = "Article"

  def layout = ApplicationLayout

  def view_template(&)
    render Components::Article.new(article: @article)
  end
end

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# /app/views/pages/articles.rb

class Pages::Articles < Pages::Base
  def initialize(articles:)
    @articles = articles
    super()
  end

  def page_title = "Blog"

  def layout = ApplicationLayout

  def view_template(&)
    h1 { "Blog" }

    @articles.each do |article|
      render Components::Article.new(article: article)

      Link(href: url_for(article)) { "Show this article" }
    end
  end
end

6. Seed Article data

Since our app is read-only, we’ll seed some Article data to have something to work with when it comes time to design our site

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# /db/seeds.rb

Article.destroy_all

Article.create!([{
                 title: "Article 1",
                 body: "As Riley’s family moves to a new city, her emotions —Joy, Sadness, Anger, Fear, and Disgust— navigate the challenges of adjusting to a new environment.",
                 published: true
               },
               {
                 title: "Article 2",
                 body: "Woody, Buzz Lightyear and the rest of the gang embark on a road trip with Bonnie and a new toy named Forky. The adventurous journey turns into an unexpected reunion as Woody's slight detour leads him to his long-lost friend Bo Peep.",
                 published: true
               },
               {
                 title: "Article 3",
                 body: "After landing the gig of a lifetime, a New York jazz pianist suddenly finds himself trapped in a strange land between Earth and the afterlife.",
                 published: false
               }])

p "Created #{Article.count} posts"

7. Create our database table

  1. run ./bin/rails generate migration AddArticles
  2. modify your migration to include the necessary fields

You may need to create the resource you need in Directus first, then inspect it using something like pgAdmin to determine the columns your table needs. The point is to have a set-up that is identical to production so that your app can switch from one DB to the other without problems

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# /db/migrate/<TIMESTAMP>_add_articles.rb

class AddArticles < ActiveRecord::Migration[8.0]
  def change
    create_table :articles do |t|
      t.string :title
      t.text :content
      t.integer :sort
      t.string :status
      t.timestamp :date_created
      t.timestamp :date_updated
    end
  end
end

Notice that we are not using the Rails helper t.timestamps. This is because, even though we are not creating records through our Rails application, we still want to display this information. Directus uses the date_created and date_updated columns which are different from Rails’ created_at and updated_at

Also, we are including a status column which Directus will populate with draft, published, archived etc. Depending on your settings.

We are including a sort column which will allow you to set the list order of your resource in Directus, and have Rails match it.

8. Migrate and Seed your database

./bin/rails db:migrate ./bin/rails db:seed

9. Deploy and populate in Directus

Self explanatory

Scroll to top
© 2025 Xolux Web Development. All rights reserved | Site design by Juan Gallardo and Charlton Diaz