[ad_1]
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!
[ad_2]
Source link
