New Sail + Vite Project `sail npm run dev` Does Not Compile Assets

Hey gang, I've been banging my head for two days trying to figure out how to change the . Any help is appreciated!!

Problem:

New Laravel Sail + Vite project compiles assets when executing terminal command sail npm run build, but does not compile assets upon terminal command sail npm run dev. I believe the @vite() Blade directive sets the IP for the Vite server to 0.0.0.0, while the Vite server is set to work on 172.19.0.8 and localhost. I changed the stock vite.config.js file and added the host instruction, but it does not change the IP. I have no idea what else to do.

What I've done:

Nota: I've set a WSL2 Alias to run Sail using sail [COMMAND] instead of ./vendor/bin/sail. I am running Debian on my WSL2 setup.

I followed the instructions on Laravel's Windows installation page:

• Installed Docker Desktop;
  • Using WSL2;
• Launched WSL2 Terminal Session and ran the command: curl -s https://laravel.build/example-test | bash
• Continuing in the Terminal Session, I cd example-app, and run: sail up. The code executes with no errors.
• I then followed all of the regular steps in finalizing a new Laravel install, and encountered no errors:
  • sail npm install
  • sail php artisan migrate
  • sail npm run dev
• The Terminal displays:

vite v2.9.13 dev server running at:
> Local:          http://**localhost**:5173
> Network:        http://**172.21.0.9**:5173
ready in 26ms.
Laravel v9.19.0
APP_URL:  http://example-test.test

***Please notice the Local and Network lines - it lists Local as localhost and Network as 172.21.0.9, while the resource links generated by Vite in the Blade templates is 0.0.0.0 ***

These steps brought upon the issues listed below.

I then decided to change the host IP in the vite.config.js file; however, when I restart the Vite server the Local address remains localhost and the Network IP remains 172.21.0.9.

What I Expect To Happen:

1. I expect Vite to compile the assets when I run sail npm run build.
2. When I run the Vite server (sail npm run dev), I expect to be able to point the browser to 'http://example-test.test' and that the website loads up.
3. When I run the Vite server (sail npm run dev), I expect to be able to point the browser to 'http://localhost' and that the website loads up with compiled assets.

What Actually Happens:

1. When I run sail npm run build, the assets are compiled and found only if I am not running the Vite server.
2. When I run the Vite server (sail npm run dev) and point the browser to 'http://example-test.test' the website does not load up, with a message: "Failed to load response data: No resource with given identifier found".
3. When I run the Vite server (sail npm run dev) and I point the browser to 'http://localhost' the website does load up, but the assets are missing. The Network tab of DevTools shows that there are three assets which are called but are not loaded:
   • 'http://0.0.0.0:5173/@vite/client:' with response 'Failed to load response data: No data found for resource with given identifier'
   • 'http://0.0.0.0:5173/resources/css/app.css:' with response 'Failed to load response data: No data found for resource with given identifier'
   • 'http://0.0.0.0:5173/resources/js/app.js:' with response 'Failed to load response data: No data found for resource with given identifier'

Configuration File Dump Area

Jump to: .env | vite.config.js | docker-compose.yml

'.env' file:

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:Q4dc3O+l4Dji5wKJiK6+wKY/OJGr/384nxfClydYalc=
APP_DEBUG=true
APP_URL=http://example-test.test

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=example-test
DB_USERNAME=sail
DB_PASSWORD=password

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=file
SESSION_LIFETIME=120

MEMCACHED_HOST=memcached

REDIS_HOST=redis
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="[email protected]"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST="localhost"
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

SCOUT_DRIVER=meilisearch
MEILISEARCH_HOST=http://meilisearch:7700

Jump to: .env | vite.config.js | docker-compose.yml

vite.config.js file:

// https://laravel.com/docs/9.x/vite
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        host: '0.0.0.0', // *** Added by me because of the
    },
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});

Jump to: .env | vite.config.js | docker-compose.yml

docker-compose.yml file:

# For more information: https://laravel.com/docs/sail
version: '3'
services:
    laravel.test:
        restart: always
        build:
            context: ./vendor/laravel/sail/runtimes/8.1
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP:-1000}'
        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:-1000}'
            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:-3306}:3306'
        environment:
            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'
            - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"]
            retries: 3
            timeout: 5s
    redis:
        image: 'redis:alpine'
        ports:
            - '${FORWARD_REDIS_PORT:-6379}:6379'
        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'
        volumes:
            - 'sail-meilisearch:/meili_data'
        networks:
            - sail
        healthcheck:
            test: ["CMD", "wget", "--no-verbose", "--spider",  "http://localhost:7700/health"]
            retries: 3
            timeout: 5s
    mailhog:
        image: 'mailhog/mailhog:latest'
        ports:
            - '${FORWARD_MAILHOG_PORT:-1025}:1025'
            - '${FORWARD_MAILHOG_DASHBOARD_PORT:-8025}:8025'
        networks:
            - sail
    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        links:
            - mysql:mysql
        ports:
            - 8080:80
        environment:
            MYSQL_USERNAME: "${DB_USERNAME}"
            MYSQL_ROOT_PASSWORD: "${DB_PASSWORD}"
            PMA_HOST: mysql
        networks:
            - sail
    selenium:
        image: 'selenium/standalone-chrome'
        volumes:
            - '/dev/shm:/dev/shm'
        networks:
            - sail
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local
    sail-redis:
        driver: local
    sail-meilisearch:
        driver: local

Jump to: .env | vite.config.js | docker-compose.yml | Top of page