statamic + vite : hmr reloading control panel

[breizhwave]

Hi, am I the only one having the issue that the control panel reloads each time I make content change or code change ? my wite config has this but I can't get it to work to exclude cp :

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
// import vue2 from '@vitejs/plugin-vue2';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/site.css',
                'resources/css/waveswiper.css',
                // 'resources/css/wavetypo.css',
                'resources/js/site.js',
                'resources/js/fslightbox.js',

                  // 'resources/js/wave-field-actions.js',
                // 'resources/js/wave-field-actions.js',
                // Control Panel assets.
                // https://statamic.dev/extending/control-panel#adding-css-and-js-assets
                // 'resources/css/cp.css',
                // 'resources/js/cp.js',
            ],
            refresh: true,
            transformOnServe: (code) => code.replaceAll('/assets', 'http://127.0.0.1:8000/assets'),
        }),
        // vue2(),
    ],
    server: {
        hmr: {
             // host: '127.0.0.1:8000',
            protocol: 'ws',
            // Add condition to exclude control panel routes
            exclude: [/^\/cp\/.*/],
        }
    },
});

[jasonvarga]

Change refresh: true to false.

But that would disable that for your front-end files.

You might want to consider two separate vite.config.js files.

vite -c vite-control-panel.config.js

[stephenmeehanuk]

I'm having the same problem, I found breizhwave's solution on the Statamic Discord, but I'm still seeing the same issue. The control panel reloads each time I make content change or change CSS and files.

Could you show a working version using the vite -c vite-control-panel.config.js suggested solution.

This is my vite file

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
// import vue2 from '@vitejs/plugin-vue2';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                "resources/css/site.css",
                "resources/js/site.js",
                "resources/css/vendors/splide-default.min.css",
                "resources/js/vendors/cookies.js",
                // Control Panel assets.
                // https://statamic.dev/extending/control-panel#adding-css-and-js-assets
                "resources/css/cp.css",
                "resources/js/cp.js",
            ],
            refresh: true,
            hmr: {
                // HMR (Hot Module Replacement)
                host: "localhost",
                protocol: "ws",
                // Add condition to exclude control panel routes
                filter: (file) => !file.includes("/cp/"),
            },
        }),
        // vue2(),
    ],
});

[jacksleight]

You might want to consider two separate vite.config.js files.

I do this, works well. Separate config, hot file and build destination:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue2 from '@vitejs/plugin-vue2';

export default defineConfig({
    plugins: [
        laravel({
            hotFile: 'public/hot-cp',
            buildDirectory: 'build-cp',
            input: [
                'resources/js/cp.js',
            ],
        }),
        vue2(),
    ],
});

Statamic::vite('app', [
    'hotFile' => __DIR__.'/../../public/hot-cp',
    'buildDirectory' => 'build-cp',
    'input' => [
        'resources/js/cp.js',
    ],
]);

Then in package.json set up separate scripts:

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "dev-cp": "vite --config vite-cp.config.js",
    "build-cp": "vite build --config vite-cp.config.js",
},

I've created a demo repo set up with this approach: https://github.com/jacksleight/statamic-vite-split-test

[stephenmeehanuk]

Thanks, this is what I've done...

Statamic::vite is this the css and js just for the control panel? This is located here:app/Providers/AppServiceProvider.php

 Statamic::vite('app', [
            'hotFile' => __DIR__.'/../../public/hot-cp',
            'buildDirectory' => 'build-cp',
            'input' => [
                'resources/js/cp.js',
                'resources/css/cp.css',
            ],
        ]);

vite.config.js looks like this. This is for the frontend js and css
I've left the vue2 plugin commented out because that's how it'll always been in my install.

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
// import vue2 from '@vitejs/plugin-vue2';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                "resources/css/site.css",
                "resources/js/site.js",
                "resources/css/vendors/splide-default.min.css",
                "resources/js/vendors/cookies.js",

                // Control Panel assets.
                // https://statamic.dev/extending/control-panel#adding-css-and-js-assets
                // "resources/css/cp.css",
                // "resources/js/cp.js",
            ],
            refresh: true,
        }),
        // vue2(),
    ],
});

The second vite config, vite-cp.config.js looks like this. This is for the control panel js and css

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
// import vue2 from "@vitejs/plugin-vue2";

export default defineConfig({
    plugins: [
        laravel({
            hotFile: "public/hot-cp",
            buildDirectory: "build-cp",
            input: [
                'resources/js/cp.js',
                'resources/css/cp.css',
            ],
        }),
        // vue2(),
    ],
});

Added the new commands to package.json

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "dev-cp": "vite --config vite-cp.config.js",
    "build-cp": "vite build --config vite-cp.config.js",
},

But when I run npm run dev the control panel still refreshes when I save changes to antler templates?

[jacksleight]

Do you still have the original Statamic::vite() call with the default config? You wont need that, only one call set up with the CP stuff.