Newbie Question

I'm trying to do something like npm run watch where it detects changes but I can't seem to get it or maybe it doesn't work like that anymore. When I run npm run build everything works great but if I run npm run dev the page crashes with three console errors on Chrome.

http://localhost:5173/@vite/client net::ERR_CONNECTION_REFUSED
http://localhost:5173/resources/js/app.js net::ERR_CONNECTION_REFUSED
http://localhost:5173/resources/js/Pages/Test.vue net::ERR_CONNECTION_REFUSED

This is my vite config

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

export default defineConfig({
    server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost'
        }
    },
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

I don't think this is normal but I'm not sure. I don't really want to develop using npm run build because VueDevTools doesn't work this way.

jlrdw

3 years ago

Level 75

Have a look at https://stackoverflow.com/questions/72848322/is-the-npm-run-watch-property-already-in-laravel-vite

eggplantSword

3 years ago

Level 9

@jlrdw Great link! I figured it out and my issue was my vite config wasn't correct. I'm using vagrant and this is what I did, I used the vagrant ip value as my host and set the watch feature on the server part as well, now if I can run npm run dev and it catches all changes and reloads for me.

//vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    server: {
        host: "192.168.56.56",
        hmr: {
            host: "192.168.56.56"
        },
        watch: {
            usePolling: true,
        },
    },
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Please or to participate in this conversation.