Getting started with customising the frontend aspects of your Rails application
What does application.html.erb file do? When do you need to make a Pages Controller?
I was trying to customise the appearance of my web application recently when I realised that I don’t understand the basics of this. The Rails Getting Started tutorial talks at length about the “backend” part of building a Rails application but barely says anything about the “frontend”.
In fact, the only reason why I realised that the application.html.erb
file was of importance was because I had seen DHH add the SimpleCSS framework to this file in the Rails 7 demo. He showed how pasting one line of code in the application.html.erb
file can make your Rails app look beautiful.
So, I went on a quest to understand this file and how it fits into my Rails application. Meaning that I asked ChatGPT a few questions and it told me everything I needed to know in a matter of minutes. Here’s what I learnt.
How application.html.erb file works
The application.html.erb file, located in the app/views/layouts directory, is the default layout file for your Rails application.
It serves as a template for the overall structure and appearance of your app across all pages. The purpose of the layout file is to define common elements like the header, footer, and navigation, which remain consistent throughout the application, as well as to include global stylesheets and JavaScript files.
It looks something like this:
<!DOCTYPE html>
<html>
<head>
<title>Your App Name</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "https://cdn.simplecss.org/simple.min.css" %>
<%= javascript_importmap_tags %>
</nav>
</head>
<body>
<p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>
<%= yield %>
</body>
</html>
When a request is made to your Rails app, the controller processes the request and renders a specific view, which is then inserted into the layout file at the position of the <%= yield %>
statement. This allows you to maintain a consistent layout while displaying different content on each page.
Other files that are responsible for the appearance of your application
The application.html.erb
file works together with views, partials, helpers, and asset management tools like the asset pipeline and Webpacker to create a complete frontend experience for your application:
Views: Views are the individual page templates that display your app's content. They are located in the app/views directory and are organized by controller name. Each view corresponds to a specific controller action.
Partials: Partials are reusable view components that can be included in multiple views. They are usually denoted by an underscore prefix in the filename, like _form.html.erb. Partials can be rendered using the
<%= render %>
method in your views.Helpers: Helpers are Ruby modules that contain methods to assist with common tasks in your views. They allow you to abstract complex logic or repetitive code from your views and keep them clean and easy to read. Helpers are located in the app/helpers directory.
Assets: Assets include stylesheets, JavaScript files, images, and other files that help style and enhance your application's frontend. They are located in the app/assets directory. Rails uses the asset pipeline to process and serve these files efficiently.
Webpacker: Webpacker is a separate tool that's included in modern Rails applications for managing JavaScript files and other frontend assets. It uses Webpack to bundle and process assets, and can be found in the app/javascript directory.
What this file should not do
Since adding SimpleCSS to the application.html.erb file had such a drastic impact on the appearance of my application, I wanted to see how I can use it to customise the homepage. But when I asked ChatGPT about it, it advised me against doing so.
Me: Okay i want to divide the homepage of the application into 2 parts:
the left part will contain a description of the application
the right part will contain the form where a new user can sign up
How should I update the application.html.erb
to do this?
ChatGPT: Instead of updating the application.html.erb
file, you should create a Pages controller, create a new view file for the homepage (usually the index.html.erb
file inside the app/views/pages
directory) and modify that to achieve the desired layout.
The application.html.erb
file should be kept generic as it serves as the layout for all pages in your application. This helps in maintaining separation of concerns and modularity in your code.
Separation of concerns: The application.html.erb file is intended to be the layout for your entire application. It should contain elements that are common across all pages, such as the header, footer, and navigation menu. By putting the homepage-specific content (description and signup form) in a separate view file (index.html.erb), you keep the layout file clean and focused on providing a consistent structure for the whole application. This makes it easier to manage and maintain your code
Modularity: By creating a separate view for the homepage, you are following a modular approach to designing your application. This means that each component (e.g., the homepage, user registration form, etc.) is self-contained and can be easily modified or reused without affecting other parts of the application. This makes your code more maintainable, scalable, and easier to understand.
What is the Pages Controller??
You have learnt that a controller in Rails is responsible for managing the flow of data between the model and the view. In other words, it handles user inputs, processes them, and updates the views accordingly.
The PagesController is just a custom controller that is conventionally used in the Rails community to manage static or semi-static pages within the application.
Even though it doesn’t work directly with a database model, it is still called a “controller” because it is responsible for managing the flow of data between the user's request and the view.
For example, if a user requests the "About" page of a website, the Pages controller will receive that request and be responsible for rendering the appropriate view for the About page. The view may contain static content, or it may display information that has been loaded from other sources, such as an external API.
Here are some key concepts related to the PagesController:
Actions: Recall that a controller action is a public method defined within the controller class. These actions correspond to the different operations that can be performed on the associated resource. For the
PagesController
, you might have actions like index, about, contact, etc., which handle the display of various static pages.Views: Each action in the PagesController typically has a corresponding view file, which contains the HTML and embedded Ruby (ERB) code to render the page. These view files are located in the app/views/pages directory and have the same name as the action (e.g.,
index.html.erb, about.html.erb
, etc.).Routes: To access the actions in your
PagesController
, you need to define routes in your config/routes.rb file. These routes map incoming HTTP requests to the corresponding controller actions. For example, you might have the following routes for yourPagesController
:
Rails.application.routes.draw do
root to: 'pages#index'
get 'about', to: 'pages#about'
get 'contact', to: 'pages#contact'
# other routes ...
end
How I implemented the Pages Controller for my case:
First, I created a new controller for my homepage:
rails generate controller Pages
Then, I created a new index action in my
pages_controller.rb
:
class PagesController < ApplicationController
def index
end
end
Next, I created a new view file
index.html.erb
inside the app/views/pages directory and add my desired HTML structure there.Finally, I updated the routes.rb file to map the homepage to the index action
Rails.application.routes.draw do root to: 'pages#index' end