Running laravel, sail (docker) & vite (react) on wsl returns 404 (not found) for application assets

Question

I'm trying to set up a Laravel + inertiajs + react application locally with sail/docker on wsl but when running the dev server I get 404 (not found) errors for every application asset. I think I collected all the random bits & pieces of configuration, but obviously something is still wrong.

My docker-compose.yml is unchanged from the default, my vite.config.js is

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

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

<!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>

With all of the above, after running sail up -d I can do a sail npm run build and then point the browser to http://localhost and everything works, or I can do sail npm run dev and the application just loads a blank page with a bunch of errors in the developer tools console which in my understanding are caused by vite returning a 404 error for application assets .

Any idea what I'm missing?

agnul · Accepted Answer · 2025-01-27 14:45:07Z

0

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.

edited Jan 27 at 14:45

answered Jan 27 at 14:39

agnul

13.2k15 gold badges68 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Running laravel, sail (docker) & vite (react) on wsl returns 404 (not found) for application assets

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related