Ruby On Rails 2026

From bibbleWiki
Jump to navigation Jump to search

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

  <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)">
      &copy; 2025 Iain Wiseman
    </footer>
  </body>