joschuba / statamic-vite

A Statamic starter kit just like a default Statamic install, just with Vite instead of Mix.
3 stars 0 forks source link

Suggestion: Add support for Laravel Sail + WSL2 #2

Open zunnur-trinovik opened 2 years ago

zunnur-trinovik commented 2 years ago

Hi, Unless the following config is added, hot reload will not work in WSL2. Alternatively, Put as comment in vite.config.js so the user can uncomment if necessary.

vite.config.js:

server: {
    hmr: {
          host: 'localhost',
    },
}

docker-compose.yml

# For more information: https://laravel.com/docs/sail
version: '3'
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.1
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.1/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
networks:
    sail:
        driver: bridge
notflip commented 2 years ago

@zunnur-trinovik Question, I included the server block in vite.config.js, should I just run php artisan serve alongside for it to work? I updated some code in my view, vite said "page reload" correctly, but my http://localhost page did not update.

zunnur-trinovik commented 2 years ago

@zunnur-trinovik Question, I included the server block in vite.config.js, should I just run php artisan serve alongside for it to work? I updated some code in my view, vite said "page reload" correctly, but my http://localhost page did not update.

You need to run npm run dev.

notflip commented 2 years ago

@zunnur-trinovik It's working now, I'm using Brave browser and it was blocking the JS required for auto-reload.