How to Use Assets in The Backend With Vite?

Vite is primarily designed for creating reactive front-end applications. However, when integrated with backend tools like WordPress, it might need a little bit of help in understanding our development processes, especially if they deviate from the standard practices. One such case is handling public assets in the backend code.

How to Use Assets in The Backend Code?

One of my readers asked a question about handling static assets in the backend code. And I want to send a big thanks to Michal because that’s a great question indeed!

Let’s try to illustrate this problem by implementing a simple requirement which is displaying a logo located in the resources/images directory in the header.

We already defined a workflow for loading CSS/JS in the previous material, involving the Assets\Resolver trait to obtain the correct URL for the assets we need. We'll use the same workflow in all backend code, but we only need to perform a small tweak.

namespace FM\Assets;

trait Resolver
{
    public function resolve(string $path): string
    {
        $url = '';

        if (! empty($this->manifest["resources/{$path}"])) {
            $url = FM_ASSETS_URI . "/{$this->manifest["resources/{$path}"]['file']}";
        }

        return apply_filters('fm/assets/resolver/url', $url, $path);
    }
}

<header class="app__header">
    <img src="{{ fm()->assets()->resolve('images/logo.svg') }}" />

    <h3>
        {{ get_bloginfo('name') }}
    </h3>
</header>

The resolve function used to handle this is hidden in the Resolver class, so we need to open it for public usage by changing the access modifier to public. Thanks to this, we can resolve assets across the whole codebase.

What if Assets Are Missing in Build?

As you probably remember, when the development mode is active assets are available within the Vite dev server. So, if we access this resource in our backend code, everything works fine. But when we build our application for production using Vite, sometimes images or files, like the logo, might not show up anymore as expected.

In Vite, images, fonts, and SVG files referenced in the CSS/JS code are automatically resolved, added to the manifest.json file, and moved to the dist directory with the build, allowing effective usage in the production mode. If assets are referenced differently, for example, in our backend code (Blade), they might not get included in the final build. As a result, when we view the a in production mode, these assets may appear missing.

It is a problem because sometimes we need to use such assets in the backend code. Of course, we can hack this workflow and add a reference to the image in the CSS file, for example, to a class that won’t be used, but it doesn’t make sense. Vite should help us, not create problems. That’s why we need to help Vite learn how to assist us.

How to Solve Missing Assets in Build?

Our goal? We want to use assets in the backend code, regardless of whether they have been referenced in the CSS/JS file or not. How to achieve this? We can manually move required files to the dist directory after each build and add entries in the manifest.json file. That’s how we will be able to use them effectively — TASK DONE.

I’m just kidding. It doesn’t make sense. Relying on manual work defeats the very purpose of Vite’s efficiency. So, what’s the solution? We ask Vite to do this!

Vite allows extending its default behaviour with plugins. We could use this plugin to copy assets from one directory to another during the build process. So, for example, we can define that the PNG, SVG files located in the resources directory should be copied to the dist folder.

Unfortunately, this plugin doesn’t fully meet our needs. We still have to manually list these assets in manifest.json file to not break our WordPress flow.

I searched for solutions but it was hard to find them, and I’m not really surprised. In the default way of using Vite, it’s not needed, because the public directory is the one that can be used for assets not referenced in the code. In our backend workflow it won’t work easily.

That's why I I decided to learn something new and create my own plugin to do exactly what I need. And surprisingly, it was easy! You can find all the required information here 👇

Thank you so much for joining me in today ❤️ Your support means a lot to me, and it keeps me motivated to create more content. If you enjoyed this video, please consider subscribing to the channel and giving it a thumbs-up - it really helps spread the word. And if you need developers who truly care about quality and delivering great results, visit my company’s site: coditive.com or contact me with the form below. Thanks again and see you next time!