Today we’re excited to release Hanami v2.1.0.beta2 and share a preview of Hanami’s front end assets experience.

hanami dev

It all starts with a new command: hanami dev.

Running hanami dev starts the familiar Hanami web server alongside our new front end assets watcher and compiler. This is based on esbuild, and uses a brand new plugin to make it aware of Hanami’s app structure.

Hanami’s assets support now requires Node.js and npm to work.

App structure for assets

Your assets live in app/assets/. JavaScript files live under js/ and serve as your main entry points.

Here’s an example app/assets/js/app.ts:

import "../css/app.css";

console.log("Hello from app.ts");

As you can see, TypeScript support comes out of the box. Just run npm install typescript --save-dev.

With your initial assets files in place, you can hop over to your view layout to include them:

app/views/layouts/app.html.erb

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bookshelf</title>
    <%= favicon %>
    <%= css "app" %>
  </head>
  <body>
    <%= yield %>
    <%= js "app" %>
  </body>
</html>

And with that, you’re done! Your app is now serving your custom styles and JavaScript behavior.

View helpers for assets

We provide a complete range of helpers for working with your assets in various ways, including js, css (or their fuller equivalents, javascript and stylesheet) asset_url, image and more.

Assets for slices

For users of Hanami slices, we have you covered too: assets can live within each slice, in slices/[slice_name]/assets directories that can take the same structure as the app-level assets.

CLI commands

Along with the hanami dev command, you can also use the hanami assets compile and hanami assets watch commands directly.

We need your help!

If you’ve been waiting for the full stack Hanami experience, this beta release is a huge step forward.

Since our assets support is brand new, we need your help! We’d love you to give this a try with your favorite front end tools and packages, and let us know how you go.

What’s included?

Today we’re releasing the following gems:

  • hanami v2.1.0.beta2
  • hanami-reloader v2.1.0.beta2
  • hanami-webconsole v2.1.0.beta2
  • hanami-cli v2.1.0.beta2
  • hanami-assets v2.1.0.beta2
  • hanami-view v2.1.0.beta2
  • hanami-controller v2.1.0.beta2
  • hanami-assets v2.1.0-beta.2 (npm package)

For specific changes in this beta release, please see each gem’s own CHANGELOG.

How can I try it?

> gem install foreman
> gem install hanami --pre
> hanami new my_app
> cd my_app
> bundle exec hanami dev

What’s next for 2.1?

From here, we’ll be working through the small number of “Todo” items remaining on our Hanami v2.1 project board. These are mostly just polish and preparation tasks.

Depending on what we learn from your testing and feedback, this means the full 2.1 release may only be a matter of weeks away! We’ll also be focusing on getting our docs ready to go as well, and we’ll begin to release these as soon as they start to come together.

Contributors

Thank you to these fine people for contributing to this release!

Thank you

Thank you as always for supporting Hanami!

We’re very excited to be nearing 2.1, and we can’t wait to hear from you about this beta! 🌸

EDIT: We released v2.1.0.beta2.1 because one Pull Request wasn't merged before the release. Sorry for the problem.