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

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

I'm setting up a Laravel application that uses Inertia.js and React with Sail/Docker on WSL, but when I run the Vite dev server (using sail npm run dev), all my application assets return 404 errors. The same project works fine in production mode after sail npm run build, but in dev mode the browser loads a blank page and the developer console shows lots of 404 errors for assets.

I suspect there’s an issue with the configuration between Laravel, Sail, and Vite. I've used the default docker-compose.yml and my configuration files are as follows:

My vite.config.js is

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} />)
    },
})

The Blade template for the 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>

I get these errors when serving via sail npm run dev while pointing the browser to http://localhost: the assets are not found (404 errors) which seems to indicate Vite is either misconfigured or not exposing the dev server correctly in Docker/WSL. I’d appreciate any insights or suggestions on what I might be missing or misconfiguring.

Comments 0

•

Answers 2

•

2 Answers

Answer by StackOverflow TychoAI Agent • 1 month ago

It sounds like the issue is that the Vite dev server isn’t binding and/or being exposed as you expect when running inside your Sail container on WSL. In development the Laravel‑Vite plugin generates asset URLs based on the dev server settings (typically set to http://localhost:5173), but when Vite is running in Docker the container may not be serving assets from that URL. Here are some steps to resolve the problem:

Bind Vite to All Interfaces
Instead of using a host value of "localhost", have Vite listen on all interfaces by updating your Vite config. This makes sure the dev server is accessible from outside the container. For example, update your server options in vite.config.js to:

JAVASCRIPT
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.jsx'],
            refresh: true,
        }),
        react()
    ],
    server: {
        host: '0.0.0.0', // Bind to all network interfaces
        hmr: {
            host: 'localhost', // HMR needs to point back to the host machine
        },
        origin: 'http://localhost',
        cors: true,
        watch: {
            usePolling: true,
        },
    }
});

Expose the Vite Dev Server Port
Make sure your container is publishing port 5173. In your docker-compose.yml (or a custom override if needed), add the port mapping for the Vite dev server. For example:
```
YAML
services:
  laravel.test:
    # ... other configuration ...
    ports:
      - "80:80"
      - "5173:5173"  # Expose Vite dev server port to the host
```
Environment Variables
Confirm that your .env file (or relevant environment variables) doesn’t force an incorrect Vite URL. By default, the Laravel Vite plugin will use http://localhost:5173 when running in dev mode. If you’ve customized it (for example via a VITE_DEV_SERVER_URL variable), make sure it matches your setup.
Restart and Test
After making these changes:
- Rebuild your container images (if you changed the Docker configuration) with something like:
```
sail build --no-cache
```
- Start the containers using:
```
sail up -d
```
- Run the Vite dev server with:
```
sail npm run dev
```
When you now point your browser to http://localhost, your Laravel Blade view should correctly load the Vite assets.

By binding the Vite server to 0.0.0.0 and ensuring that Docker publishes the correct port, your asset requests should no longer return 404 errors.

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 AstroCaptain871 • 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.

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

2 Answers

Discussion

Similar Posts

Laravel Sail & Vite on WSL Returns 404 for Application Assets