Search code examples
laravelwindowstailwind-cssvitelaravel-9

Is Vite development server required for Laravel apps in production

Im on a new Laravel9, Vite3 and TailwindCss3 project.

The issue

Using npm run build isn't enough for deploying the app!

When I do not run Vite's development server I get the following error:

Unable to locate file in Vite manifest: resources/css/app.css.

But when I use npm run dev everything works fine!

Reproducing

I used the following commands:

laravel new vite-test --git &&
cd .\vite-test\ &&
npm i &&
npm install -D tailwindcss postcss autoprefixer &&
npx tailwindcss init -p &&
php ./artisan serve

And edited the following files following the docs:

<!-- resources\views\welcome.blade.php -->

<!DOCTYPE html>
<html lang="en">

<head>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

<body>
    <div class="h-screen w-screen bg-red-500"></div>
</body>

</html>

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./resources/**/*.blade.php",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
};

/* resources\css\app.css */

@tailwind base;
@tailwind components;
@tailwind utilities;

Then:

npm run build
Solution

  • The issue was in the file separator used in manifest.json when Vite runs on Windows, and it is solved by upgrading Vite to ^3.0.4.

    After the upgrade:

    ...
    "resources/css/app.css": {
        "file": "assets/app.7b7f948e.css",
        "src": "resources/css/app.css",
        "isEntry": true
    }
}

    And before:

    ...
    "resources/css\\app.css": {
        "file": "assets/app.7b7f948e.css",
        "src": "resources/css\\app.css"
    }
}