Laravel (Sail): Vite Dev Server not found (404)

Viewed 3313

I am currently switching from webpack to vite.

Current status is, that build commands (yarn production) works for js and css using vite.

However, using the dev server, I receive an 404 message telling me, that the files weren't found - what did I miss?

term

Below is my code:

vite.config.js

export default ({ command }) => ({
    base: command === 'serve' ? '' : '/build/',
    publicDir: 'fake_dir_so_nothing_gets_copied',
    build: {
        manifest: true,
        outDir: 'public/build',
        rollupOptions: {
            input: 'resources/js/app.js',
        },
    },
    server: {
        strictPort: true,
        port: 3000
    },

    resolve: {
        alias: {
            '@': '/js',
        }
    }
});

helpers.php

<?php

use Illuminate\Support\Facades\Http;
use Illuminate\Support\HtmlString;

function vite_assets(): HtmlString
{
    $devServerIsRunning = false;

    if (app()->environment('local')) {
        try {
            Http::get("http://localhost:3000");
            $devServerIsRunning = true;
        } catch (Exception) {
        }
    }

    if ($devServerIsRunning) {
        return new HtmlString(<<<HTML
            <script type="module" src="http://localhost:3000/@vite/client"></script>
            <script type="module" src="http://localhost:3000/resources/js/app.js"></script>
        HTML);
    }

    $manifest = json_decode(file_get_contents(
        public_path('build/manifest.json')
    ), true);

    return new HtmlString(<<<HTML
        <script type="module" src="/build/{$manifest['resources/js/app.js']['file']}"></script>
        <link rel="stylesheet" href="/build/{$manifest['resources/js/app.js']['css'][0]}">
    HTML);
}

so I can finally embed {{ vite_assets() }} inside my blade layout

1 Answers

I recommend you to use: https://laravel-vite.dev/ when passing from webpack to vite, it worked perfect for me and took me like less than an hour.

Related