Hanami-assets not seeming to work

issues
1

Maybe I’m missing a configuration or something, but I’ve been playing with hanami 2.1rc2 and I can’t seem to get assets working, neither with hanami dev running the asset watcher, or manually running hanami assets compile. Running in dev mode, it appears to start the watcher, and the assets.json is generated, but dropping files in app/assets/* or in slices/*/assets/* doesn’t appear to do anything at all. Also, when I run hanami assets compile, it always just immediately comes back with nothing. No idea what is going on, running with nodejs v18.19, and ruby v3.0.2, if either of those is a factor.

2

@raelik Thank you for testing Hanami 2.1!

I’m sorry this hasn’t worked for you so far, but I do have a hunch that might help you. One thing about our assets setup (which is yet to be properly documented) is that we only look for JavaScript files named app (with all common JS file extensions) as the entrypoints.

So this means in your app/assets/, you should have at least a file named app/assets/app.js, and if you want it split into more files, you can place app files in subdirectories, such as app/assts/my_special_area/app.js.

See the “App structure for assets” section of this release announcement for a very small example of the structure you can use.

Does the above help you possible figure out your issues?

3

That definitely helps some, at least with the js and css files. But what about images, fonts, etc? Maybe I should clarify on that, so I tested with fonts at least, and I’m noticing that in public/ the directory structure isn’t being preserved. So anything in app/assets/fonts, app/assets/images, or any other subdirectory I’ve created just ends up in public/assets. I think this is why I wasn’t seeing what I expected, I just didn’t notice the files going there before, as I was just looking at one of my slices’ assets. Also, the same thing is happening for the js and css assets. The only directories that get created in public/assets are directories for each slice, and then any subdirectories you create within each directory in app/assets or <slice>/assets (such as js, css, fonts, images, etc), but not those directories themselves.

4

Oh, heh. I guess this is expected behavior. Should have expected a basically flat assets directory.

5

Something else I’ve noticed, in production mode /assets seems to no longer be accessible. Is this intentional behavior? It’s easy enough to configure around, as any production environment is going to have a reverse proxy and you can simply serve those files directly, I’m just wondering if this is intentional.

6

@raelik How did you end up organizing the fonts?

Here’s my current layout which doesn’t really work:

app/
  assets/
    css/
      app.css
      hack.css
    fonts/
      hack/
        hack-regular.woff2
    js/
      app.js

Then entry point app.js reads:

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

And the font CSS:

@font-face {
  font-family: 'Hack';
  src: url('../fonts/hack/hack-regular.woff2?sha=3114f1256') format('woff2');
  font-weight: 400;
  font-style: normal;
}

The assets compile without error, but the generated app.css contains:

/* app/assets/css/hack.css */
@font-face {
  font-family: "Hack";
  src: url(../../app/assets/fonts/hack/hack-regular.woff2?sha=3114f1256) format("woff2");
  font-weight: 400;
  font-style: normal;
}

That’s not a valid route of course.

Using src: url('/assets/hack/hack-regular.woff2?sha=3114f1256') format('woff2'); instead doesn’t work neither, the assets fail to build since this URL doesn’t resolve locally.

Maybe you figured out how this is done right?

7

I’ve created a separate thread along with an example app here: Incorrect paths after asset compile