Add @Hotwire/Turbo to a Lucky Application

Lucky is a web framework for the Crystal programming language, inspired by the best lessons learned from Ruby on Rails.

The below steps outline how to enable Hotwire Turbo on a new Lucky Application.

(This tutorial assumes you already have an application in a working development environment on your own machine that you can run with the lucky run command.)

Install Turbo

Before editing anything in your crystal application, you'll need to install the Turbo JavaScript library.

Navigate to your project's main directory (the same directory where shard.yml is located), and run

yarn add @hotwired/turbo

or

npm install @hotwired/turbo

(depends on your preferred method for adding third-party JavaScript libraries).

Add Turbo to app.js

Open up the file /src/js/app.js. On a newline add:

import * as Turbo from "@hotwired/turbo"; 

(Don't forget the semicolon! I know as a Crystal developer you're not used to that.)

Test Installation

Launch your development server by navigating to your main project directory and running lucky dev.

Open up localhost:3000 to any page with links on it.

With your browser open in one window and your terminal in the other, mouse over any hyperlink on your webpage. Each time your cursor touches a hyperlink to another page of your app, you should see your server receive a GET request.

Version Notes

This tutorial was made with Crystal 1.11.2, Lucky 1.1.1, and @hotwired/turbo 8.0.4.