The Making of That Nutty Guy: Page Layout

Topics Covered in This Ruby on Rails Tutorial:

Building the complete Product Model, View, and Controller architecture, seamlessly incorporating professional designer HTML and CSS, integrating Bootstrap 4 with modern Webpacker tooling, and resolving common asset pipeline issues with images and fonts

Exercise Overview

This comprehensive series of exercises demonstrates the complete development lifecycle of the That Nutty Guy ecommerce site that serves as our foundation in Exercise 8A. Consider this an intensive refresher that reinforces the core concepts from the first half of the book while introducing modern Rails 6 best practices.

You'll master the essential skills that define professional Rails development: architecting robust model objects, transforming static HTML designs into dynamic Ruby on Rails applications, implementing clean controller and view patterns, and establishing proper routing conventions. As a valuable bonus, you'll discover how to integrate Bootstrap 4 into Rails 6 using the modern Webpacker and Yarn ecosystem—essential skills for contemporary web development in 2026.

This hands-on approach mirrors real-world development scenarios where you'll frequently need to convert designer mockups into fully functional web applications while maintaining clean, maintainable code architecture.

Getting Started

1. Launch your browser and navigate to the static HTML homepage provided by our designer: Desktop > Class Files > yourname-Rails Class > that nutty guy snippets > That Nutty Guy HTML > index.html.

2. Examine this professionally designed ecommerce homepage—this will become the foundation of our dynamic Rails application. Click on Tinfoil Hat to preview the product detail page structure. In this exercise, we'll build both the index and individual product pages with full functionality.

3. Open Applications > Utilities and launch Terminal.

4. In Terminal, type cd followed by a single space (do NOT hit Return yet).

5. On the Desktop, open the Class Files folder, then drag the yourname-Rails Class folder directly into the Terminal window to auto-complete the path.

6. Press Return in Terminal to navigate into that directory.

7. Generate your new Rails application with the following command:

   rails new nutty

   NOTE: Remember to press Return after each Terminal command unless explicitly instructed otherwise. This is standard practice we'll assume moving forward.

8. Rails has now scaffolded your complete application structure. Check the yourname-Rails Class folder—you'll find a new nutty directory containing your project foundation.

9. Open this new nutty folder in your preferred code editor (such as Sublime Text or VS Code) to enable efficient project navigation and file management throughout this tutorial.

Creating the Product Model, View, & Controller

Now we'll build the core product architecture that powers our ecommerce functionality. This follows Rails' convention-over-configuration philosophy to create clean, maintainable code.

1. In your browser, open product.html from the That Nutty Guy HTML folder. This represents our target design for individual product pages. We'll implement both the Details and Specs tabs with full functionality.

2. Navigate into your Rails application directory by typing:

   cd nutty

3. Generate your Product model with appropriate attributes using this single command:

   rails g model product title:string sku:string description:text specs:text price:decimal

   This command creates several essential files: the model class, test files, and a database migration. Let's break down the syntax:

   • g: Rails shorthand for generate
   • product: the model name (always singular in Rails conventions)
   • title, sku, description, specs, price: the database fields with their respective data types

4. Open the generated migration file in your code editor: nutty > db > migrate > #_create_products.rb

   NOTE: The timestamp number in the filename ensures proper migration ordering and will vary based on when you generated the file.

5. Locate line 8 and enhance the price field definition with precision controls:

   t.decimal :price, precision: 8, scale: 2

   NOTE: This precision specification is crucial for financial data. Different database systems handle decimal precision inconsistently—some default to zero decimal places, which would store prices as whole dollars without cents. The precision: 8 parameter allows for 8 total digits, while scale: 2 reserves 2 digits for cents, enabling prices up to $999,999.99.

6. Save and close the migration file.

7. Execute the migration to create your database structure:

   rails db:migrate

   With our database schema established, we'll create a seeds file to populate sample data. Seeds files are invaluable for development—they allow you to quickly populate your application with realistic test data, enabling immediate testing of features without manual data entry.

8. Navigate to the pre-prepared seeds file: Desktop > Class Files > yourname-Rails Level 2 Class > snippets folder.

9. Open seeds.rb in your code editor.

10. Select all content and copy it with Cmd–C, then close this file. We'll replace Rails' default seeds file with this customized version.

11. Open your project's seeds file: nutty > db > seeds.rb.

12. Delete all existing content and paste the new seed data.

    Examine this code structure—you'll see an array of product objects, each containing the attributes we defined in our model. This demonstrates best practices for organizing seed data in a maintainable format.

13. Save and close the seeds file.

14. Populate your database with the sample products:

    rails db:seed

    Terminal will display the eight products being created, confirming successful database population.

15. Now let's create the controller to manage these products. Generate the products controller:

    rails g controller products

    NOTE: Follow Rails naming conventions strictly—models use singular names (product), while controllers use plural names (products). This consistency is essential for Rails' auto-loading and routing mechanisms.

16. Configure your application routes in nutty > config > routes.rb

17. Remove all commented code, leaving only the basic structure:

    Rails.application.routes.draw do
    end

18. Add your routing configuration:

    Rails.application.routes.draw do
       resources :products, only: [:index, :show]
    
       root 'products#index'
    end

19. Save and close the routes file.

20. Start your Rails development server:

    rails s

21. Test your routing by navigating to: localhost:3000

    The error message "The action 'index' could not be found…" confirms that routing is functioning correctly—Rails is successfully finding the route but looking for the missing controller action.

22. Implement the controller actions in nutty > app > controllers > products_controller.rb

23. Add the index action to display all products:

    class ProductsController < ApplicationController
       def index
          @products = Product.all
       end
    end

    This creates an instance variable @products containing all product records, making them available to the view template. This pattern mirrors our previous Flix application development.

24. Add the show action for individual product pages:

    class ProductsController < ApplicationController
       def index
          @products = Product.all
       end
    
       def show
          @product = Product.find(params[:id])
       end
    end

25. Save and close the controller file.

26. Create the index view template and save it as index.html.erb in nutty > app > views > products.

27. Create the show view template and save it as show.html.erb in the same nutty > app > views > products directory.

    Rails follows strict naming conventions for automatic file resolution. These empty files establish the proper structure—Rails will automatically render them when the corresponding controller actions are called.

28. Verify your setup by navigating to localhost:3000 in your browser.

    The blank page with "Nutty" in the browser title indicates successful configuration. No errors means your MVC architecture is properly connected and functional.

Setting up the Site Design

With our Rails foundation established, we'll integrate the professional design assets and implement the templating system that separates reusable layouts from page-specific content.

1. Open the designer's HTML template: Desktop > Class Files > yourname-Rails Class > that nutty guy snippets > That Nutty Guy HTML > index.html

   We'll extract the page template from this static HTML. In Rails' templating system, the application layout contains elements that persist across all pages (header, navigation, footer), while individual views contain page-specific content. This separation ensures maintainable, DRY (Don't Repeat Yourself) code.

2. Open your Rails layout file: nutty > app > views > layouts > application.html.erb

3. Copy these essential Rails helper tags (we'll need them shortly):

   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
   
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

4. Create a temporary file and paste these Rails helpers for safekeeping.

5. Return to the index.html file and copy all its content.

6. In application.html.erb, replace all existing content with the copied HTML from index.html.

7. Retrieve the Rails helper tags from your temporary file, copy them, then close the temporary file without saving.

8. In application.html.erb, locate and replace these static CSS links (around lines 11–12):

9. Replace them with the Rails helper tags:

   
   
   <%= csrf_meta_tags %>
   <%= csp_meta_tag %>
   
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
   <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
   
   

10. Reorder the helper tags to ensure proper Bootstrap integration. JavaScript must load before CSS for Webpacker compatibility:

    
    
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    
    

11. Remove the outdated JavaScript includes at the bottom of the file (around lines 145–148):

12. Save the layout file.

13. Install Bootstrap and its dependencies using Yarn (the modern approach for Rails 6+ asset management):

    yarn add bootstrap@4.3.1 jquery popper.js

14. Configure Webpacker to load these libraries by opening app > javascript > packs > application.js

15. Add the following imports after the existing require statements:

    require("jquery")
    
    import 'bootstrap'
    import './src/application.scss'

16. Create the directory structure: app > javascript > packs > src

17. Create application.scss inside this src folder.

18. Add the Bootstrap import to application.scss:

    @import '~bootstrap/scss/bootstrap';

19. Configure Webpack to provide jQuery globally by updating config > webpack > environment.js:

    const { environment } = require('@rails/webpacker')
    
    const webpack = require('webpack')
    environment.plugins.append('Provide', new webpack.ProvidePlugin({
      $: 'jquery/src/jquery', 
      jQuery: 'jquery/src/jquery', 
      Popper: ['popper.js', 'default']
    }))
    
    module.exports = environment

20. Minimize your code editor and navigate to the CSS assets: Desktop > Class Files > yourname-Rails Class > that nutty guy snippets > That Nutty Guy HTML > css

21. Copy normalize.min.css and main.css.

22. Navigate to your Rails stylesheets directory: Desktop > Class Files > yourname-Rails Class > nutty > app > assets > stylesheets

23. Paste both CSS files into this directory.

24. Open your application stylesheet: nutty > app > assets > stylesheets > application.css

25. Include normalize.css in the asset pipeline by adding it above the require_tree directive:

    *= require 'normalize.min'
    *= require_tree .
    *= require_self
    */

26. Save and close the file.

27. Test your progress by reloading localhost:3000 in your browser. The site should display improved styling, though images and some fonts will still be missing—we'll address these assets next.

Fixing the Missing Images & Fonts

The final step involves properly configuring static assets to ensure all images and custom fonts display correctly in your Rails application.

1. Open Finder and navigate to: Desktop > Class Files > yourname-Rails Class > that nutty guy snippets > That Nutty Guy HTML > img

2. Copy the entire img folder using Cmd–C.

3. Navigate to your Rails public directory: Desktop > Class Files > yourname-Rails Class > nutty > public

4. Paste the img folder using Cmd–V.

   NOTE: Files in the public folder are served directly by the web server at the application root, making images accessible at URLs like localhost:3000/img/filename.jpg.

5. Refresh localhost:3000 in your browser.

   Excellent! All images now display correctly. However, custom fonts like the "Nutty" logo font are still missing.

6. Return to Finder and navigate to: Desktop > Class Files > yourname-Rails Class > that nutty guy snippets > That Nutty Guy HTML > fonts

7. Copy the fonts folder using Cmd–C.

8. Paste it into the Rails public directory: Desktop > Class Files > yourname-Rails Class > nutty > public

9. The font paths in our CSS need adjustment for the Rails environment. Open: nutty > app > assets > stylesheets > main.css

10. Examine the font URL declarations at the top of the file. They contain ../ relative path prefixes that worked for the static HTML but break in Rails.

11. Use your editor's Find and Replace feature:

    • Sublime Text: Go to Find > Replace
    • Dreamweaver: Go to Edit > Find and Replace

12. Configure the replacement operation:

    Find What:	../
    Replace With:	/

13. Execute Replace All. You should see 12 total replacements.

    NOTE: This change converts relative paths to absolute paths from the application root, which aligns with how Rails serves public folder assets.

14. Save and close the CSS file.

15. Perform a final test by refreshing localhost:3000 in your browser.

    Perfect! Your Rails application now displays the complete professional design with all images and custom fonts rendering correctly.

16. Keep both your code editor and Terminal open—you'll continue building on this foundation in the next exercise where we'll implement dynamic product listings and detailed product pages.