How to use Vite inside an addon during development

[rogerthat-be]

I'm currently developing an addon in Statamic and have encountered a scenario related to styling my tags. I've decided to utilize Vite, and possibly Tailwind, for bundling my assets.

Following the documentation, I've successfully configured my scripts and styles, with the $vite property, and they are automatically loaded in the control panel, which is great. However, I specifically need these assets to be applied on the frontend rather than the control panel.

My question is: How can I reference my active Vite server (inside the addon) to serve that CSS before it is bundled, ensuring that the styles are applied on the frontend during development?

[jasonvarga]

Are you using the Vite tag?

https://statamic.dev/tags/vite

[rogerthat-be]

Yes, I am.

I created a Statamic tag in my addon (that can be called with {{ myaddon::scripts }}), which returns a view.
By using that tag, developers could embed the addon scripts/styles in templates.

Inside the corresponding (Antlers) view, I placed the Vite tag:
{{ vite src="resources/js/addon.js|resources/css/addon.css" }}

However, when I use the {{ myaddon::scripts }} tag, the following error occurs:
Unable to locate file in Vite manifest: resources/js/addon.js.
npm run dev is running, inside my addon

---

Currently, I have made a workaround by inspecting the existing control panel templates from Statamic to find out how it's been done there. (My styles and scripts were loaded in the dashboard, but that's not my goal)

I have made an alternative (blade) view, that returns the following code, when calling {{ myaddon::scripts }}

@foreach (Statamic::availableVites(request()) as $package => $vite)
    {{ \Illuminate\Support\Facades\Vite::useHotFile($vite['hotFile'])
           ->useBuildDirectory($vite['buildDirectory'])
           ->withEntryPoints($vite['input']) }}
@endforeach

This seems to work. It loads the correct scripts and styles when Vite is running, and also works when the addon scripts & styles are build and get published to the public folder.

However, i'm not sure this is the "right" way?

[jasonvarga]

The vite tag has a directory parameter on that, which you'll need to match.

[rogerthat-be]

After some trial & error, I've successfully managed to get it working. The tag below (with both the "hot" and "directory" attributes) is essential when working within an addon directory.

{{ vite src="resources/js/addon.js|resources/css/addon.css" hot="addons/rogerthat-be/myaddon/resources/dist/hot" directory="vendor/myaddon/build" }}

Thanks Jason

[JorisOrangeStudio]

{{ vite src="resources/js/addon.js|resources/css/addon.css" hot="addons/rogerthat-be/myaddon/resources/dist/hot" directory="vendor/myaddon/build" }}

@rogerthat-be Is this also the final line in your view for the tag on production environments when published? How does that look like?