Is Vite development server required for Laravel apps in production

user_17873304 0
Viewed 548

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
laravel-9 vite tailwind-css laravel windows
3 Answers

There should be a file named 'hot' in the public folder of your Laravel project. Deleting that file will allow the resources to be loaded from the build folder generated by npm run build command.

Hope it helps.

user_160920440

Vite is a tool made to better your life while developing your project. This make use of hotswapping changes in your CSS files and blade files.

npm run dev compiles your assets with NODE_ENV=development set.

You don't need to run vite when publishing to your server

user_81932790

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"
    }
}
user_178733040
Related