How to bundle AlpineJS via package.json

questions
1

Hi!

This may be a silly question, but I’m a little lost in esbuild: For the little JS foo I need, I’ve loaded AlpineJS from CDN so far. In order to serve it locally now, I’ve added AlpineJS as a production dependency to package.json, but how do I add it to the assets bundle or load it in the template?

Cheers, -sven

2

Hi @svoop, to add it to the bundle that Hanami generates, you’ll need to import it into an entry point within your app, e.g. app/assets/js/app.js:

import "../css/app.css";
import Alpine from "alpinejs";

After this, when you load your bundle via <%= javascript_tag "app" %> in your layout, Alpine will be included.

Please let us know if that works for you? This would be helpful for others!

3

Thanks @timriley for this really quick answer! Totally works for me and to help others, I’ve created a PR for the guides – not sure whether the placement and example is a good one though.