CODEWITHSUNDEEP
laravelwindowstailwind-cssvitelaravel-9
medilies
medilies

Reputation: 2208

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

Upvotes: 2

Views: 8296

Answers (3)

medilies
medilies

Reputation: 2208

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

Upvotes: 1

Adil Saleem
Adil Saleem

Reputation: 111

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.

Upvotes: 11

Jasper Helmich
Jasper Helmich

Reputation: 751

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

Upvotes: 0

Related Questions