Laravel 10 + Vite on WSL + Docker stopped creating/using styles

I have a Laravel 10 project which started out long ago as a Laravel 5 project. But for this iteration, I created a clean project and starting migrating models and controllers one-by-one. The only bit that came over mostly the same were the migrations, but even the seeders and factories got a make-over.

And it was all working just fine. I converted from bootstrap to tailwind, worked through the various style changes to get my layouts working the way I wanted, then went away for a month due to life, and today, I fire it up and everything is unstyled. I have no idea why. Compared to the last time it worked, Docker has been updated, and I did "sail npm update".

I'm running the app via "sail up -d" and then running "sail npm run dev". My config is pretty vanilla. If I edit a blade file, vite does respond and rebuild/reload the page, but there are absolutely no styles defined. I'm using Chrome as my browser and enabling the dev tools to see my styles, there really are no styles.

I've tried using "sail php artisan" to clear pretty much anything that has a clear command than restarting "sail npm run dev" but that had no effect.

What I do get is a failed responses from the vite server that show up on the browser dev console

GET http://localhost:5273/@vite/client net::ERR_EMPTY_RESPONSE
GET http://localhost:5273/resources/css/app.css net::ERR_EMPTY_RESPONSE
GET http://localhost:5273/resources/js/app.js net::ERR_EMPTY_RESPONSE

vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    server: {
        hmr: {
            host: 'localhost',
        },
    },
});

tailwind.config.js

import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
import typography from '@tailwindcss/typography';

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
        './vendor/laravel/jetstream/**/*.blade.php',
        './storage/framework/views/*.php',
        './resources/views/**/*.blade.php',
    ],

    theme: {
        extend: {
            fontFamily: {
                sans: ['Figtree', ...defaultTheme.fontFamily.sans],
            },
        },
    },

    plugins: [forms, typography],
};

postcss.config.js

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

the entire head section of my main template

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="csrf-token" content="{!! csrf_token() !!}">

        <title>{{ $title ?? config('app.name', 'Scout Tracker') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

        <!-- Scripts -->
        @vite(['resources/css/app.css', 'resources/js/app.js'])
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css">

        <!-- Styles -->
        @livewireStyles
    </head>

and my docker-composer.yml

services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.2
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.2/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:5173'
        environment:
            WWWUSER: '${WWWUSER}'
            LARAVEL_SAIL: 1
            XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
            XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
            IGNITION_LOCAL_SITES_PATH: '${PWD}'
            PHP_IDE_CONFIG: "serverName=Docker"
        volumes:
            - '.:/var/www/html'
        networks:
            - sail
        depends_on:
            - mysql
            - redis
            - meilisearch
            - mailpit
            - 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'
        environment:
            MEILI_NO_ANALYTICS: '${MEILISEARCH_NO_ANALYTICS:-false}'
        volumes:
            - 'sail-meilisearch:/meili_data'
        networks:
            - sail
        healthcheck:
            test:
                - CMD
                - wget
                - '--no-verbose'
                - '--spider'
                - 'http://localhost:7700/health'
            retries: 3
            timeout: 5s
    mailpit:
        image: 'axllent/mailpit:latest'
        ports:
            - '${FORWARD_MAILPIT_PORT:-1025}:1025'
            - '${FORWARD_MAILPIT_DASHBOARD_PORT:-8025}:8025'
        networks:
            - sail
    selenium:
        image: selenium/standalone-chrome
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        volumes:
            - '/dev/shm:/dev/shm'
        networks:
            - sail
networks:
    sail:
        driver: bridge
volumes:
    sail-mysql:
        driver: local
    sail-redis:
        driver: local
    sail-meilisearch:
        driver: local

LaryAI

2 years ago

Level 58

Based on the error messages you're seeing in the browser's dev console, it looks like the Vite server is not properly serving your static assets (CSS and JS files). Here are a few steps you can take to troubleshoot and resolve the issue:

Check Vite Server Port Configuration: Ensure that the Vite server is running on the correct port and that the port is correctly mapped in your docker-compose.yml file. You've mentioned that you're using port 5173 for Vite, but the error messages are for port 5273. Make sure there's no typo or misconfiguration there.
Verify Vite Server is Running: Run sail npm run dev and make sure that the Vite server starts without any errors. Look for messages indicating that the server is running and listening on the expected port.
Check Network Access: Since you're using WSL + Docker, ensure that your Windows host can access the Vite server running inside WSL. Sometimes, network configurations can prevent access to the services running in WSL from Windows.
Update Vite Configuration: If you're accessing your Laravel application from a domain other than localhost, you'll need to update the hmr configuration in your vite.config.js to reflect the correct host. For example, if you're using laravel.test, your hmr configuration should look like this:
```
server: {
    hmr: {
        host: 'laravel.test',
        port: 5173,
    },
},
```
And make sure to update your /etc/hosts file or equivalent to point laravel.test to the correct IP address.
Clear Caches: Sometimes, old cached files can cause issues. Clear all caches using the following commands:
```
sail artisan optimize:clear
sail npm run dev
```
Check File Paths: Verify that the paths specified in your vite.config.js for input are correct and that the files exist at those locations.
Check Docker Volume Mounts: Ensure that your Docker volumes are correctly mounted and that the Vite server has access to the necessary files within the Docker container.
Inspect Network Traffic: Use your browser's network inspector to check if there are any other network issues that might be causing the ERR_EMPTY_RESPONSE error.
Check Docker Logs: Look at the logs for your Docker containers to see if there are any errors that might indicate why the Vite server isn't serving the files correctly. You can view logs with the following command:
```
sail logs
```
Rebuild Docker Containers: If all else fails, try rebuilding your Docker containers. Sometimes, a fresh build can resolve unexplained issues:
```
sail down --rmi all -v
sail build --no-cache
sail up -d
```

If you've gone through these steps and are still experiencing issues, please provide any additional error messages or logs that could help in diagnosing the problem further.

rbroberts

2 years ago

Level 3

Okay, so LarryAI is sort-of on the right track. I do have VITE_PORT=5273 because I have more than one app I'm working on and I've offset some of the ports. In my .env I've got this

VITE_PORT=5273
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}"

and in my docker-compose.yml I've got

        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:5173'

So... VITE_PORT from my .env is being ignored; sort-of. When vite comes up, it clearly displays that it thinks it is working with port 5273, but I had to manually change my docker-compose.yml to

        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5273}:5273'

and everything now works.

I'm totally confused about why I needed to make this change. My host is not on port 80, it's on 8080 and that's working just fine from my .env setting, so why didn't this one?

Please or to participate in this conversation.