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

admin2025-04-22 1

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?

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>

Any idea what I'm missing?

Share Improve this question asked Jan 21 at 15:39 agnul 13.1k15 gold badges67 silver badges89 bronze badges

Add a comment |

1 Answer 1

Sorted by: Reset to default 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.

转载请注明原文地址:http://anycun.com/QandA/1745300079a90560.html

php - Running laravel, sail (docker) &amp; vite (react) on wsl returns 404 (not found) for application assets - Stack Overfl

1 Answer 1

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