Ruby On Rails 2026
Introduction
Got new job which wanted this skill to poking around to have another go.
Installation
No robot back in 2020 when last I gave this the initial look. It is telling me to use asdf with a specific version. Clearly I need to check this out before doing. For Ubuntu its self it say
sudo apt install -y build-essential libssl-dev libreadline-dev zlib1g-dev libsqlite3-dev
So went with the version of asdf it said because the second instructions fail because there is no completions directory with the latest release so for asdf
sudo apt install curl git
git clone https://github.com/asdf-vm/asdf.git ~/.asdf --branch v0.14.0
echo '. "$HOME/.asdf/asdf.sh"' >> ~/.bashrc
echo '. "$HOME/.asdf/completions/asdf.bash"' >> ~/.bashrc
source ~/.bashrc
Now for rails went with 3.3.11
asdf plugin add ruby
asdf install ruby 3.3.11
asdf global ruby 3.3.11
And for Bundler and Rails
gem install bundler -v 2.4.19
gem install rails
rails -v Rails 8.1.3
VS Code
Needed to install Ruby LSP and Ruby by Shopify and ERB Formatter/Beautify by Ali Ariff. Also need to add to my gemfile under development
group :development do
# Use console on exceptions pages [https://github.com/rails/web-console]
gem "web-console"
gem "rubocop", require: false
gem "rubocop-rails", require: false
gem "htmlbeautifier"
end
Making my Website Page
So set up and ready to go. A few things to note
- routes in /config/routes
- views in /app/views/<page-name>
- layouts in /app/views/layouts
- components in app and a PageHeader component component with
So I generated an app, page and component
rails new bibble_web_ror --css=tailwind
cd bibble_web_ror
rails generate controller Bill index
rails generate component PageHeader
Told the robot what I did for view and it kindly gave me the rest. Here is the amended layout
<body class="min-h-screen bg-(--color-bg-page) text-(--color-text-primary)">
<a href="#main-content" class="sr-only focus:not-sr-only">Skip to content</a>
<main id="main-content"
class="max-w-300 bg-(--color-bg-sections) px-2 pt-2 shadow-(--shadow-page) not-only:mx-auto">
<%= render PageHeaderComponent.new(title: @title, subtitle: @subtitle) %>
<div class="u-container">
<%= yield %>
</div>
</main>
<footer class="p-4 text-center text-sm text-(--color-text-primary)">
© 2025 Iain Wiseman
</footer>
</body>
And for the component
<header class="mb-6">
<h1 class="text-3xl font-bold text-(--color-text-primary)">
<%= @title %>
</h1>
<% if @subtitle.present? %>
<p class="mt-1 text-(--color-text-secondary)">
<%= @subtitle %>
</p>
<% end %>
</header>