Assets are not served when running "sail npm run dev" without an existing build folder after migrating from Mix to Vite on Laravel using Sail

I migrated from Mix 6.0.6 to Vite 3.0.9 (laravel-vite-plugin 0.5.4) on Laravel 9.2.5.1.

I followed these instructions: https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-laravel-mix-to-vite

The assets resources/css/app.css and resources/js/app.js are not served when i start hot-reloading on Sail via sail npm run dev (= vite) , if i did not build them before via sail npm run build (= vite build) and the ./public/build/** files exist.

If the compiled assets in ./public/build/** do NOT exist, then @vite(['resources/css/app.css', 'resources/js/app.js']) in my blade-template does not touch the defined links - they are referenced like that in the web-browser, and therefore won’t be served.

If the compiled assets in ./public/build/** DO exist, then @vite(['resources/css/app.css', 'resources/js/app.js']) in my blade-template is converted to the related compiled assets, e.g. build/assets/app.3696ec54.css or build/assets/app.dfc18a0d.js.

Shouldn’t hot-reloading started with sail npm run dev (= vite) also create the build-directories and files on related file-changes?

And is it possible to change the build target directory like we can do it with Mix?

My package.json scripts section:

"scripts": {
        "dev": "vite",
        "build": "vite build"
    }

My vite.config.js:

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

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

My postcss.config.js:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
}

My docker-compose.yml:

# For more information: https://laravel.com/docs/sail
version: "3"
x-tz: &tz
    TZ: Europe/Berlin
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:
            <<: *tz
            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
        depends_on:
            - mysql
            - redis
            - meilisearch
            - selenium
    mysql:
        image: 'mysql/mysql-server:8.0'
        ports:
            - '${FORWARD_DB_PORT:-3307}:3307'
        environment:
            <<: *tz
            MYSQL_TCP_PORT: '${DB_PORT}'
            MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ROOT_HOST: "%"
            MYSQL_DATABASE: '${DB_DATABASE}'
            MYSQL_USER: '${DB_USERNAME}'
            MYSQL_PASSWORD: '${DB_PASSWORD}'
            MYSQL_ALLOW_EMPTY_PASSWORD: 1
        volumes:
            - 'sail-mysql:/var/lib/mysql'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"]
            retries: 3
            timeout: 5s
    redis:
        image: "redis:alpine"
        ports:
            - "${FORWARD_REDIS_PORT:-6379}:6379"
        environment:
            <<: *tz
        volumes:
            - 'sail-redis:/data'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "redis-cli", "ping"]
            retries: 3
            timeout: 5s
    meilisearch:
        image: 'getmeili/meilisearch:latest'
        ports:
            - '${FORWARD_MEILISEARCH_PORT:-7700}:7700'
        environment:
            <<: *tz
        volumes:
            - 'sail-meilisearch:/data.ms'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "wget", "--no-verbose", "--spider",  "http://localhost:7700/health"]
            retries: 3
            timeout: 5s
    mailhog:
        image: 'mailhog/mailhog:latest'
        environment:
            <<: *tz
        ports:
            - '${FORWARD_MAILHOG_PORT:-1025}:1025'
            - '${FORWARD_MAILHOG_DASHBOARD_PORT:-8025}:8025'
        networks:
            - sail
    selenium:
        image: 'selenium/standalone-chrome'
        environment:
            <<: *tz
        volumes:
            - '/dev/shm:/dev/shm'
        networks:
            - sail
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local
    sail-redis:
        driver: local
    sail-meilisearch:
        driver: local

[Geovanek]

I’m using Sail withi Laravel UI.

Just adding this solving my problem:

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

[jessarcher]

If server.apps.local resolves to 127.0.0.1 then by specifying it for server.host you’re telling Vite to only listen on the localhost of the container (which is not the localhost of your host machine) which would make Vite inaccessible outside of the container.

If running Vite inside Sail’s main container, then you should be able to remove server.host from your config and remove the --host flag because we automatically configure it for you. If you’re using a different Docker setup, then you should either set server.host to true or use the --host option.