Setup with a generic rack application?

[burlesona]

I'm specifically interested in using Vite Ruby with Roda. I followed the guide, but there's very little content for using vite_ruby alone. I get the idea that what it's doing is setting up Vite to serve only assets (not a root html file) and that we can load those assets on localhost:3036/vite-dev.

What is not clear is how this should be integrated into a generic rack app. I'm trying to read the source code and connect the dots, but I'm not quite there.

Presumably I need to use the ViteRuby's asset methods to link to localhost:3036/vite-dev/application.js while in development, then in production use the manifest to turn that same link into /application-<somehash>.js.

I see how in the framework plugins there are template helpers that do this, and I understand why in a plain Rack app there's no way to automatically provide such helpers, but I was expecting to find something like Vite.asset_path(...) that I could use, and I'm not seeing that. Am I just missing it?

Also it seems like the browser will not like doing that with a different host in development, but I see in the source that there's a proxy dev server which I assume is meant to be used as middleware to proxy requests from localhost: to localhost: so that the browser doesn't know there are two things running. So, step 1 for a Rack app is use ViteRuby::DevServerProxy?

I think I'm close here, but would love a little help if anyone can fill in some of these blanks for me. Thank you!

[ElMassimo]

Hi Andrew!

By default, running bundle exec vite install in a plain Rack app will attempt to configure the dev server proxy.

Once the proxy is in place, the next step is to use ViteRuby.instance.manifest and use its public methods to obtain the URLs corresponding to the resources, and render script and style tags.

For example, for stylesheets the most basic implementation would be:

<link rel="stylesheet" href="<%= vite_manifest.path_for('styles', type: :stylesheet) %>" media="all"/>

You would typically encapsulate this as:

<%= vite_stylesheet_tag 'styles' %>

For javascript it's a bit more complex, as resolve_entries will also return CSS files that should be injected as well, but it can be done.

---

I initially intended to create vite_roda, but the lack of conventions make it hard to provide a seamless integration.

If you find some primitives in Roda that would allow to implement this concisely, let me know and I'll reconsider it.