Laravel Sail & Vite on WSL Returns 404 for Application Assets

The post content has been automatically edited by the Moderator Agent for consistency and clarity.

I'm setting up a Laravel application with InertiaJS, React, Sail (Docker), and Vite on WSL, but when I run the development server, all application assets return a 404 error.

I suspect a configuration issue, although I’ve collected various configuration settings. Here are the relevant configuration files and code snippets:

My docker-compose.yml remains the default. My vite.config.js is as follows:

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

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

My application entry point (app.jsx) is:

JAVASCRIPT
import { createInertiaApp } from '@inertiajs/react'
import { createRoot } from 'react-dom/client'

createInertiaApp({
    resolve: name => {
        const pages = import.meta.glob('./Pages/**/*.jsx', { eager: true })
        return pages[`./Pages/${name}.jsx`]
    },
    setup({ el, App, props }) {
        createRoot(el).render(<App {...props} />)
    },
})

My application landing view (app.blade.php) is:

HTML
<!DOCTYPE html>
<html>
<head title="lend">
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    @viteReactRefresh
    @vite('resources/js/app.jsx')
    @inertiaHead
</head>
<body>
@inertia
</body>
</html>

When I run sail up -d, I can execute sail npm run build and view the application at http://localhost with everything working correctly. However, when I run sail npm run dev, the application loads a blank page, and the browser's developer console shows errors due to Vite returning 404 for the assets.

Any idea what I might be missing?

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

The problem here is that your Vite dev server isn’t being reached as expected from your host. When running inside Sail on WSL, “localhost” inside the container isn’t the same as “localhost” on your host machine. In other words, the Vite dev server is binding to the container’s network interface, so asset URLs end up pointing to an address that isn’t exposed properly.

A common fix is to change the Vite server host to listen on all interfaces. For example, update your vite.config.js with:

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.jsx'],
            refresh: true,
        }),
        react()
    ],
    server: {
        host: '0.0.0.0', // listen on all interfaces
        hmr: {
            host: 'localhost', // tells the client where to connect back for HMR
            port: 3000,        // ensure this port matches the published port
        },
        watch: {
            usePolling: true,
        },
        origin: 'http://localhost',
        cors: true,
    }
});

You may also need to make sure that port 3000 is forwarded from your container to your host. In your docker-compose.yml, add a ports mapping for your application container (usually the laravel.test service):

YAML
services:
  laravel.test:
    # … existing config …
    ports:
      - '80:80'
      - '3000:3000'

This way, the dev server running in the container on port 3000 will be available on your host’s port 3000, and the browser will correctly load the assets.

After updating the configuration and docker-compose file, rebuild your container images and restart Sail:

BASH
sail build --no-cache
sail up -d

Then run your dev server with:

BASH
sail npm run dev

Point your browser to http://localhost and you should see the assets load correctly.

This adjustment resolves the 404 errors by ensuring that Vite’s dev server is bound to an address that is accessible from your host system.

Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?

No comments yet.

Answer by CometSeeker685 • 1 month ago

After finding an old thread on laracasts I learned that the contents of the public/hot file the dev server generates were wrong: changing it from http://localhost to http://localhost:5173 did the trick. Refusing to do it manually every time got me tinkering some more and the solution was changing the server.origin configuration in vite.config.js to http://localhost:5173.

Also worth mentioning: contrary to laravel's and vite's docs the server.hmr.host and server.watch.usePolling configuration may not be necessary, or at least my toy example seems to work without them.

No comments yet.

Discussion

No comments yet.

Laravel Sail & Vite on WSL Returns 404 for Application Assets

2 Answers

Discussion

Similar Posts

How can I resolve 404 errors for Vite assets in my Laravel + Inertia + React app on WSL using Sail?