Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

sselekane's avatar

Laravel + Vite Production Issue

The website in production is broken.. I'm utilizing Vite to bundle my assets. Below is my code:

vite.config.js

import { defineConfig } from 'vite';
import laravel, { refreshPaths } from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
                'public/assets/css/line-awesome.min.css',
                'public/assets/fonts/stylesheet.css',
                'public/assets/css/fontawesome-all.css'
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

app.blade.php

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    @vite('resources/css/app.css')
    @vite('public/assets/fonts/stylesheet.css')
    @vite('public/assets/css/line-awesome.min.css')
    @vite('public/assets/css/fontawesome-all.css')

    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>

    <title>{{ config('app.name', 'app') }}</title>

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

</head>

.gitignore

/node_modules
/public/hot
/public/storage
/storage/*.key
/vendor
.env
.env.backup
.env.production
.phpunit.result.cache
Homestead.json
Homestead.yaml
auth.json
npm-debug.log
yarn-error.log
/.fleet
/.idea
/.vscode

app.js

import './bootstrap';
import 'flowbite';


import { MeiliSearch } from 'meilisearch'

window.MeiliSearch = MeiliSearch

import search from "./components/search";

window.components = {
    search,
};

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

In production, the assets are generated and the asset links are functioning, but the website itself appears broken. I've ensured that the asset paths are correctly configured, but there seems to be an issue that I can't pinpoint. Any guidance or assistance on how to troubleshoot and resolve this issue would be greatly appreciated. Thank you in advance for your help!

0 likes
12 replies
vincent15000's avatar

Why are you calling twice @vite('resources/css/app.css') ?

I don't understand what is broken in your application.

Have you executed npm run build ? And have you sent the public/build folder to the server ?

sselekane's avatar

@vincent15000

Why are you calling twice @vite('resources/css/app.css') ? - typo

I don't understand what is broken in your application. - the website in production. styles are not applied to the website.

Have you executed npm run build? And have you sent the public/build folder to the server? - yes i did and online the links of assets are clickable.

1 like
vincent15000's avatar

@sselekane Inside the head tags, you have this.

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

I see twice resources/css/app.css.

Have you any error message in the console ?

vincent15000's avatar

@sselekane Sure it wasn't the source of the problem, but there was not need to have it twice.

Have you checked on the server if you have the build folder inside the public folder ?

vincent15000's avatar

@sselekane It's pretty fine like this with a minimum of styles ;) ... sorry it's a joke.

Have you tried to import all the styles from inside the app.css file instead of setting all the inputs in the vite configuration file ?

MohamedTammam's avatar

@sselekane What's inside your build/assets folder in your production? and what does that generated points to?

1 like
vincent15000's avatar

@sselekane Have you checked if it would not be only a cache problem ? I mean the cache of the browser or of the internet box.

Please or to participate in this conversation.