Vite reloads control panel

[stephenmeehanuk]

Is there a way to restrict vite, so it only reloads front-end pages?

I've found this post (11357), and the suggested solution is to have two vite configs.

I followed the instructions provided, but the same issue persists.

I've checked the laravel-vite-plugin docs, the default for refresh: true, means vite is triggered when any of these files are saved:

app/View/Components/**
lang/**
resources/lang/**
resources/views/**
routes/**

The docs show it's possible to provide our own paths like this:

refresh: ["resources/views/**"],

But this doesn't seem to restrict/exclude the pages vite refreshes, as any open tabs with /cp in the URL are also refreshed.

Vite is also triggered when I save pages that outside of the scope specified?

The video below shows refresh: ["resources/views/**"], is set. However, when saving routes/web.php and lang/en/validation.php both files are outside resources/views/** vite still reloads?

vite-1.mp4

[jacksleight]

I've created a demo repo set up with the approach detailed here which works as described: https://github.com/jacksleight/statamic-vite-split-test

When running npm run dev and saving site changes the CP won't reload. Hope that helps get things set up.

[stephenmeehanuk]

Just spotted this, thanks Jack. I'll give it a go.

[stephenmeehanuk]

Thanks Jack, managed to get this working. Thanks so much for whipping up that test repo.

It's all working now, just wondering, how does Statamic 'know' to look in build-cp for the custom control panel css and js?

I can see there's a buildDirectory: "build-cp", config in vite-cp.config.js, but I've not updated any paths relating to build-cp?

Trying to understand how this works...

vite.config.js this only contains front-end js and css. Running npm run dev or npm run build uses vite.config.js

AppServiceProvider.php contains Statamic::vite which specifies a different hotFile. Running npm run dev-cp or npm run build-cp uses vite-cp.config.js. This file repeats the same config as Statamic::vite

I can't see what part of this alternative set up stops the control panel from reloading?

In my original set up, I had these files in my laravel input in my vite.config, they where also referenced in AppServiceProvider.php

"resources/css/cp.css",
"resources/js/cp.js",

Is that the bit that was making the control panel refresh? Because the control panel was using css and js files that where being updated by npm run dev. So by putting them in vite-cp.config.js the files aren't updated as part of npm run dev

That must be it. Sorry for the ramble!

And thanks again for your help :)

[jacksleight]

how does Statamic 'know' to look in build-cp for the custom control panel css and js?

Because of this line:

Statamic::vite('app', [
    'buildDirectory' => 'build-cp',
]);

I can't see what part of this alternative set up stops the control panel from reloading?

It all comes down to the hot file. The vite-cp.config.js and Statamic::vite calls are both set to use a hot file called hot-cp. The hot file is created/removed when the Vite dev server is started/stopped. The purpose of it is to tell Laravel's Vite component whether or not to connect to the dev server. The default frontend config uses a hot file called hot. But if the CP was also configured to look for that same file it would incorrectly think the CP's dev server is running when you're working on the frontend, and connect to it, triggering reloads when frontend files change.

[stephenmeehanuk]

Brillant.