Laravel 12 — UI broken after npm run build on VPS (Ubuntu, no Docker)

Hi everyone,

I have a Laravel 12 project running on an Ubuntu VPS (no Docker) with PHP 8.4 and npm 11.4.2. The web service was working fine.

Recently, I made some changes to the frontend views (new UI adjustments). After that, I ran:

npm run build

on the server.

vite.config.js config

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: [resources/views/**/*],
}),
tailwindcss(),
],
server: {
cors: true,
},
});

Issue:

After building, the UI on the website looks wrong — everything appears large and not user-friendly anymore.

What I’ve tried:

Cleared Laravel cache:

php artisan config:clear
php artisan view:clear
php artisan cache:clear
Cleared browser cache


Restarted server

Flushed cache at domain provider/CDN side

Still seeing the same issue.

Could someone suggest what else might be causing this?

Wrong build path or asset link?

Cache issue somewhere else?

Build config problem?

Any ideas or suggestions would be appreciated. Thanks!

Braunson

10 months ago

Level 18

We need more information.

Look at what you changed, if you revert that, does it build properly? If so look more at your code and figure out why your new code/changes caused the issue.
Any build errors?
It sounds almost like your missing an asset (everything appears large and not user-friendly). So check what is setting say global font style and see if it's in the compiled style file.. then figure out where the source is (pre-build) and look at why it's not being included.
Can you rule out the CDN isn't caching the build CSS file for sure?

Please or to participate in this conversation.