Only $60
This gem, Hot Glue, is a rapid application prototype builder for Rails. It will take your existing models and build you quick dashboards using Turbo Rails. It assumes you know the basics of Rails — MVC, routes, etc — and want to build a Create-Read-Update-Delete (CRUD) set of operations on an object in your database. It handily comes with a LIST page with pagination and does all of its operations as Edit-in-Place. This means the user never leaves the page. It gives you a simple, lego-like set of building blocks to formulate standard-looking dashboards. It stays within those bounds and tries to do what it does well and nothing else.
This tutorial will introduce you to Hot Glue by walking you through five separate examples. Each of the examples demonstrates a different part of Hot Glue, and by the end, you should have an understanding of how to use it.
If you are not yet familiar with Rails MVC (Model-View-Controller) or Rails routes, you should start with a basic Rails tutorial or the Rails guides.
Hot Glue has only 1 page of documentation — the README itself — which is the same as its Github home, here.
For this tutorial, you will need to scroll to the section marked “Getting Started” in the this README document, and follow allow there. I will reference those steps below briefly but not repeat all of the details.
Getting Started
Remember, start with “Getting Started” in the README. As you go through each step, always remember to examine and check in your code. That way you can easily see and understand what each step does.
First, if you’re on Rails 6, complete Step 1: Add Hotwire and Step 2: Switch from Turbolinks to Turbo-Rails
You’ll next want to add the hot glue gem (Step 3), and add the testing gems (Step 4). Next run the Hot Glue installer as described in Steps 5 & 6.
Step 5 is to decide on a theme layout and if you want to use Bootstrap or not. Hot Glue’s first implementation used Bootstrap, and you can still use Bootstrap 4 if you want use Hot Glue with the --layout=bootstrap flag during your installation. (This gets saved to config/hot_glue.yml, where you can easily change it.) When constructing scaffold with bootstrap layout (at this time Hot Glue peeks into config/hot_glue.yml to see what you’ve set there), your views come out with divs that have classes like .container-fluid, .row, and .col. You’ll need to install Bootstrap separately, any way you like, but jQuery is not required as Hot Glue does not rely on jQuery-dependant Bootstrap features.
If instead, you install Hot Glue (or switch the setting) using the default layout mode (--layout=hotglue), your scaffolding will be built using no-Bootstrap syntax: It has its own syntax with classes like .scaffold-container, .scaffold-list, .scaffold-row, and .scaffold-cell
During the installation, if your --layout flag is left unspecified or set to hotglue (that means you didn’t set it to bootstrap), Hot Glue will also expect you to pass a --theme flag.
The themes are:
• like_bootstrap (inspired by Bootstrap 4)
• like_los_gatos (Netflix inspired)
• like_mountain_view (Gmail/Google Analytics inspired)
• dark_knight (inspired by 2008 film The Dark Night)
The installer (Step 6) just copies the SCSS file from the gem into your app. You are free to modify it from there.
Note that Steps 6(B), 5 (C), 5(D) have been done for you by the installer, but you should visually inspect the generated files to see what has happened and check them in group-by-group.
Step 7 is installing Font Awesome. (Hot Glue will work fine without the fonts because they are only decorative icons within some of the generated buttons.)
Finally, Step 8 is to add Enum support for Postgres. To do this, you’ll need to install another gem and know how to define your enums. This is covered in my blog post Enumerated Types in Ruby on Rails with Postgres. If you have no enum fields on your models then you can skip this step.
The very last thing to consider is Devise and authentication (Step 9), but that is not necessary for Example 1. Example 2 specifically covers how to install Devise and shows how access control works with your logged-in user.
Ok let’s dive in.