Creating the Rails Application

For this book, we will use Rails version 8 to create a simple application that stores useful URLs for users to access later. This application uses SQLite as the database, TailwindCSS for styling, and Importmaps for a no-build approach, aligning with the latest Rails practices.

Rails new

Run the following command in your terminal:

rails new hotwireapp --css tailwind --skip-jbuilder

Creating the Url Resource

Navigate to the project folder and create a scaffold for the Url resource with the following attributes:

cd hotwireapp && bin/rails generate scaffold Url title:string link:string description:text

Creating a Custom Home Page

Generate a new controller and create a custom home page to demonstrate stack navigation in iOS. This page will serve as the entry point for the Rails application:

bin/rails generate controller pages home

The root route

Set the custom home page as the default route by updating the config/routes.rb file as follows:

Rails.application.routes.draw do
  get "pages/home"
  resources :urls

  get "up" => "rails/health#show", as: :rails_health_check

  root "pages#home"
end

Preparing the Database 

bin/rails db:prepare

Accessing the Application via Browser

Start the development server with:

bin/dev

Then, access the application in your browser at [http://localhost:3000](http://localhost:3000).

web-localhost.png

Adding a Web Navbar 

<nav class="w-full bg-blue-600">
  <div class="container mx-auto px-4">
    <div class="flex justify-between items-center h-16">
      <div>
        <%= link_to "Hotwire App", root_url, class: "text-white text-lg font-semibold hover:text-purple-200" %>
      </div>
      <div class="flex space-x-6">
        <%= link_to "ToDos", urls_path, class: "text-white hover:text-purple-200" %>
      </div>
    </div>
  </div>
</nav>

Ensure the partial is rendered in your application layout (app/views/layouts/application.html.erb):

<body>
  <%= render 'layouts/navbar' %>
  <main class="container mx-auto mt-28 px-5 flex">
    <%= yield %>
  </main>
</body>

Testing the Navbar

Update the page and ensure the Navbar links are working as expected.

navbar-web.png

Next step

With these configurations, you’re ready to proceed with developing a native iOS app integrated with your Rails application.