I embarked on an experiment with a Rails application using modern alternative tools and libraries. In this post, I’ll walk you through the steps I took to set up a Rails template repository with the following technologies:
Configuration with Bun JS runtime for efficient JavaScript management.
Integration of TailwindCSS for sleek UI design.
Utilization of Phlex library to build views entirely in Ruby, eliminating the need for mixed template languages and replacing partials and view helpers with components.
Implementation of HTMX actions for dynamic content swapping without full page refresh.
Setup Steps:
Installed bun js runtime (I used mise, btw)
Added necessary gems and generated some configurations:
Edited Procfile to remove bun css watch line and use tailwindcss:watch task.
Edited application_layout.rb to remove javascript_importmap_tags line.
This is how it looks:
The Rails bin/dev command starts the three processes defined in the Procfile file. The Rails server, the Bun js runtime, and the TailwindCSS watcher.
Some code highlights:
The main application layout, in Ruby, has some header and footer definitions and a call to a Ruby block in the tag.
The controller has an action for listing the Articles and the method to handle the POST to add a new Article.
The Index view has a title, an Add button, and the list of Articles. In a real app these Articles would probably be passed on initialization from a DB query outside this class.
The Article component just generates some random data. In a real app it would probably be populated from an Active Record object on initialization.
The full source repository is available here.
By following these steps, I was able to leverage a modern UI frontend for a Rails application in a hopefully more maintainable way.
I plan to continue experimenting with these tools on more advanced topics like forms, websockets & SSE updates, filters, pagination, using JS interactivity, and more complex components.
Happy coding!
