The Setup

Hot Glue's Setup

You may have heard Rails comes with everything you need to launch a great app and it's completely true. Rails itself is in fact a decade and a half of what DHH, Rails' creator and leader, calls "conceptual compression." This means that the concepts that used to take whole teams in the dawn of the web (1990s) — like writing SQL — are in today's Ruby on Rails compressed to take just minutes today. (DHH's best keynote on the subject, freely available on Youtube here, is from the 2018 Rails Conf and is titled "Fix Me")


Hot Glue is a Turbo Rails prototype development toolkit that gives you just a little more juice.

For Rails 6, Hot Glue has an annoyingly long list of setup steps, but many of them were in preparation for the Turbo Rails era and, fortunately are no longer needed with Rails 7.

The remaining setup steps, which you can find at Getting Started section of the README, give you just a little extra push to get going with brand new Rails projects

For new developers starting with Rails who learned the basics of MVC and Rails relationships and are thinking "What next?" Hot Glue is the answer: Even doing the heavy work for you, this gem will still help you become a great Rails developer.

Rspec

Rspec has been the go-to standard for the Rails community for writing tests for over a decade and a half.

If you are new to Rails, Hot Glue is a great place to start learning Capybara and system specs.

That's because it does the work for you!

You read that correctly, Hot Glue generates specs along with the working code.

While you may need to modify the specs sometimes, they serve as an excellent template for your fully-covered functionality (even with some necessary modifications.)


Devise (optional)

Devise has been the go-to standard for authentication (logging in and logging out) also for over 15 years. Many new developers begin by writing example "Log in" functionality but fail to realize how much of an iceberg problem it is when you consider the security implications. Most application developers really don't need to understand the cryptography behind how passwords work. Devise, an old but reliable juggernaut of the Rails world, has sturdily provided many of the most common Rails apps on the internet with log-in functionality for all of this time.

In Devise, you will create a database model using rails generate model (typically User, but you can use any persona-based name for your table name), then you will add Devise to that model. (This is what the examples will do.)


Two things to note about Devise for newbies:

1) It comes with lots of "turned off" functionality. This functionality lets you do fancy things with your user record like lock them out if they try to hack you, recover their account by themselves, confirm their account, etc. To have this extra functionality, you need to add extra fields to your database model. Then, you'll add some devise flags to your model to flip that functionality on.

2) Devise is highly email based. A trend in new web apps I've noticed in the last few years is to go SMS or phone based-authentication, which I do not recommend.

For my apps, I use email as the primary mechanism of authentication and then provide SMS as a secondary add-on option once people have confirmed their email address. There are several reasons for this which I will not get into here but suffice it to say, this is a security recommendation. (Security for your users and security for your platform.)

If you are absolutely against using an email-based authentication for your users, Devise is not for you.

If you want to use Hot Glue without Devise, you can, but you need to implement the current_user object yourself.


Bootstrap (optional)

If you like Bootstrap, Hot Glue's Bootstrap layout is for you. If you don't, then you can alternatively use Hot Glue's own theme files which implement table using flexbox layouts.

In particular, when working with Bootstrap, you will find that you may spend a good amount of time thinking about its 12-column layout, and putting your fields, portals, and content into these 12 columns.

Hot Glue is designed for just this if you like this, but also can be used outside of the Bootstrap context.

Please note that the generated code is different for the Bootstrap layout vs. the Hot Glue built-in theme layouts, so you cannot switch between them without rebuilding your code.

When you install Hot Glue it will force you to choose a layout (--layout) option. Remember, the only two layout options are bootstrap and hotglue



Rails 6 and Below

Hot Glue was designed specifically for Turbo Rails, which wasn't officially part of Rails until Rails 7. If you are on Rails 6 and you want to try out Hot Glue on your app, be sure to see the "Rails 6 Legacy Install" instructions in the README.


Rails 7

For Rails 7, what is slightly confusing is that you must start with either Importmap or Bundling.

If you are starting with Bundling, you must make sure to understand how to use the SASS watcher in the background.

If you fail to do this, your app will look like it is working, but it will submit HTML requests instead of TURBO_STREAM requests. As a result, Hot Glue's scaffold will behave as-if Turbo is not present (indeed, Turbo will be broken.) I am highlighting this here because it's easy to miss: If Turbo is working, Hot Glue's scaffold does not take you to a new page when you click "New". Instead, the new action happens as "New-in-Place" at the top of the existing list— right next to where the "New" button appears on the screen.

If it does not happen this way for you, you probably do not have Turbo working correctly.

For this reason, I would strongly recommend for new Rails 7 apps you confirm that both Turbo and Stimulus are working before even getting starting with Hot Glue.

The steps for this can be found here:

https://jasonfleetwoodboldt.com/courses/stepping-up-rails/rails-7-new-app-with-js-bundling-css-bundling/

For that exercise, you can skip checking-in the test code you are writing and delete it after you confirm that Turbo + Stimulus are working.




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.


During the setup, you need to decide if you want 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 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 just copies the SCSS file from the gem into your app. You are free to modify it from there. Note that this is 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.


The last step is installing Font Awesome. (Hot Glue will work fine without the fonts because they are only decorative icons within some of the generated buttons.)


The very last thing to consider is Devise and authentication, 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.

Updated March 2022 with an explanation of new Rails Setup With or Without Bundling — Bootstrap + Jquery, Rspec, Hotglue, Font-awesome, Devise.

Note: jQuery is not required for Hot Glue, it is shown here only for demonstration purposes.


Option #1: With Bundling

https://jasonfleetwoodboldt.com/courses/stepping-up-rails/rails-7-new-app-with-js-bundling-css-bundling/


Option #2: Without Bundling

https://jasonfleetwoodboldt.com/courses/stepping-up-rails/rails-7-bootstrap/


Watch a tutorial showing the setup steps for Rails 7.


Complete and Continue