Utilitzar i configurar Vite en un Projecte Laravel

Per començar, caldrà instal·lar Node al projecte amb la comanda npm install. Això ens crea a l'arrel del projecte la carpeta node_modules.

Un cop instal·lat, per configurar Vite en un entorn Laravel funcionant amb Vagrant, l'arxiu vite.config.js el configurarem així:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        host: '192.168.56.56',
        watch: {
            usePolling: true,
        },
        port: 5174,
        strictPort: true,
        hmr: {
            host: '192.168.56.56',
            port: 5173,
        }
    },
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/sass/web.scss',
                'resources/sass/backoffice.scss',
                'resources/sass/responsive.scss',
                'resources/css/sqm-icons.css',
                'resources/css/animate.min.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ]
});

Per executar Vite (fer que estigui "corrent" en segon pla), entrarem a la màquina virtual amb vagrant ssh i, situats dins el directori arrel del projecte, executarem npm run dev. Això fa que en carregar la pàgina no es mostri l'error de que no es detecta l'arxiu manifest.json.

Així, cada cop que fem un canvi als arxius .scss i desem, Vite detecta els canvis i torna a processar l'arxiu, alhora que la web s'autorecarrega per veure els canvis al navegador.

Ara bé, IMPORTANT! Cal tenir en compte que aquests canvis, si parem Vite, caldrà “publicar-los”. Per això, caldrà executar npm run build. Normalment, això només caldrà fer-ho a l'hora de compilar els "assets" del frontend per pujar-ho al servidor en producció.

Així mateix, a l'ordinador amfitrió, hem obert els ports d'entrada 5173 i 5174 configurant el Firewall de Windows, per permetre la connexió. Tot i que aquest punt potser no seria del tot necessari, estrictament.