Configure ERB & Slim Views with Hanami 2.0
One of the first things any developer starting with a new Hanami project will have to do is configure a template engine. Sadly, as of today (Hanami v2.0.1) does not come with a template engine out of the box. That explains why their BookShelf sample application lacks views and takes a JSON API route.
Unfortunately, I couldn't find docs about Hanami-View. Your best option would be to look at its spec folder and figure it out with trial and error.
Adding Dependencies
Currently, Hanami::View doesn't have a release that works with Hanami 2.0. The Hanami View 2.0.0.alpha8 conflicts with Hanami 2.0 (expecting Dry Configuration v0.5, but Hanami 2.0 uses v1.0). This issue has been fixed in the main branch. While we are at it, we will also add both slim and erbse gems to the mix.
# Gemfile
source 'https://rubygems.org'
gem 'hanami', '~> 2.0'
# ...
gem 'hanami-view', github: 'hanami/view', branch: 'main'
# View & presentation
gem 'erbse', '~> 0.1.4'
gem 'slim', '~> 4.1.0'
Hanami-views uses Tilt for handling templates. Tilt works as an interface facilitating the seamless integration with multiple templating engines available in Ruby, including but not limited to Slim, ERB, Haml, Sass, Scss, Less, Redcarpet, Kramdown and Pandoc.
Important: hanami-view is an alpha release and may have unresolved issues.
Your First View
Since the Hanami application comes with a ready-made action, Actions::Home::Show, let's use that for the sake of brevity.
In the next four steps, I will create a view, its corresponding template and a basic layout file. I will use a mix of ERB and Slim for demonstration purposes.
Let's add a base class for all views that inherit from Hanami::View. This is not necessary, but it will come in handy in the future.
# app/view.erb
module WorldTime
class View < Hanami::View
end
end
Then let's create a view to show the home page. It will inherit from the base view we defined before.
# app/views/home/show.rb
module WorldTime
module Views
module Home
class Show < WorldTime::View
# template 'home/show'
end
end
end
end
And now for the corresponding view... Hanai-view out of the box expects to find the templates in the app/templates/ directory. So let's add something simple there.
// app/templates/home/show.html.slim
h1 Hello Hanami!
The next is to create a layout file. Hanami-view expects to find the
<!-- app/templates/layout/app.html.erb -->
<html>
<head>
<title>World Time</title>
</head>
<body>
<%= yield %>
</body>
</html>
Rendering the view
We can render the view in action now that we have the view in place.
# frozen_string_literal: true
module WorldTime
module Actions
module Home
# Root path
class Show < WorldTime::Action
include Deps['views.home.show']
def handle(*, response)
response.body = show.call
end
end
end
end
end
Conclusion
This article discusses the inclusion of Hanmi-View in a Hanami project and how you can have a basic view. I hope it saved you a few minutes of your time until the official documentation and How-To article get published.
In the next article, I plan to discuss how you can introduce assets (for example, CSS, JS, images and videos) to your application.
About the Author
Ziyan Junaideen -
Ziyan is an expert Ruby on Rails web developer with 8 years of experience specializing in SaaS applications. He spends his free time he writes blogs, drawing on his iPad, shoots photos.