Setting up StimulusJS with a Lucky Crystal application
June 25, 2020 by Stephen Dolan
Introduction
StimulusJS is a JavaScript framework “designed to augment your HTML with just enough behavior to make it shine”. It allows for extremely clean, composable, and re-usable JavaScript sprinkles to keep server-centric applications feeling buttery-smooth.
Lucky is a blazing fast and intuitive framework for building rock-solid web apps quickly. It leverages Turbolinks by default, which StimulusJS supports fully through extensive use of Mutation Observers.
Let’s get these two working together for a super productive web developer experience!
Shortcut
If you want an even quicker way to set up StimulusJS, go check out my post on the Bloat gem for a way to get up and running in three commands!
Setup
All of these instructions can be found in their generic form in the StimulusJS Documentation.
Let’s start by adding the stimulus
package to our application:
yarn add stimulus
Next, set up your src/js/app.js
to import and load StimulusJS:
import { Application } from "stimulus";
import { definitionsFromContext } from "stimulus/webpack-helpers";
const application = Application.start();
const context = require.context("./controllers", true, /\.js$/);
application.load(definitionsFromContext(context));
That’s it! Now we just need to set up some StimulusJS controllers in a new directory according to their standards.
Let’s start with the directory:
mkdir src/js/controllers
Next, we’ll add a sample src/js/controllers/hello_controller.js
file to ensure that everything is set up correctly:
import { Controller } from "stimulus";
export default class extends Controller {
initialize() {
console.log("Hello from StimulusJS!");
}
}
Finally, add the following to a page in your application, and verify that you see a message in you JavaScript console on page load:
h1 "Testing StimulusJS!", data_controller: "hello"
Summary
StimulusJS is fantastic for server-rendered applications because of the small JavaScript footprint, and is especially powerful in Lucky due to its reliance on plain data
HTML attributes and how nicely it plays with Turbolinks out of the box.
Want some help with your personal productivity system?