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

abkrim's avatar
Level 13

Problem with site in producction: livewire.js and app.js 404

Today I put on production a site with a Dashboard based in FilamentAdmin.

I'm working perfectly on local. But in production, after a problem with login, check with developers tools two problems

404 Errors

  • some.domain.ovh/filament/assets/app.js?id=942414d090ce297f343ebeb13f12bc7 error 404
  • some.domain.ovh/livewire/livewire.js?id=de3fca26689cb5a39af4

I see that path is not correct. In local I've tried to compile with npm run development and I don't get any problem

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './resources/**/*.blade.php',
    './resources/**/*.js',
    './resources/**/*.vue',
    './vendor/filament/**/*.blade.php',
  ],
  darkMode: 'class', // original false or 'media' or 'class'
  theme: {
    extend: {
        colors: {
            danger: colors.purple, // rose
            primary: colors.sky, //original blue
            success: colors.emerald, // green
            warning: colors.orange, //yellow
        },
        fontFamily: {
            sans: ['Nunito', ...defaultTheme.fontFamily.sans]
        }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
      require('@tailwindcss/forms'),
      require('@tailwindcss/typography'),
  ],
}

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',
                'resources/css/filament.css',
            ],
            refresh: [
                ...refreshPaths,
                'app/Http/Livewire/**',
            ],
        }),
    ],
});

postcss.config.js

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    },
};

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "development": "vite build"
    },
    "devDependencies": {
        "@alpinejs/focus": "^3.10.5",
        "@tailwindcss/forms": "^0.5.3",
        "@tailwindcss/typography": "^0.5.8",
        "autoprefixer": "^10.4.13",
        "alpinejs": "^3.0.6",
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.7.3",
        "lodash": "^4.17.19",
        "postcss": "^8.2.4",
        "postcss-import": "^12.0.1",
        "tailwindcss": "^3.2.4",
        "tippy.js": "^6.3.7",
        "vite": "^4.0.3"
    }
}

resources/js/bootstrap.js

import _ from 'lodash';
window._ = _;

import axios from 'axios';
window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

resources/js/app.js

import './bootstrap';

import Alpine from 'alpinejs';
import focus from '@alpinejs/focus';
window.Alpine = Alpine;

Alpine.plugin(focus);

Alpine.start();
0 likes
5 replies
Sinnbeck's avatar

How are you calling resources/css/filament.css in code?

abkrim's avatar
Level 13

I'm not sure if you're asking me about this, @sinnbeck In resources/css/filament.css there're this:

@import '../../vendor/filament/filament/resources/css/app.css';

And according manual filamentdmin. in AppServiceProvider I has this code in boot:

public function boot()
{
    Filament::serving(function () {
        // Using Vite
        Filament::registerViteTheme('resources/css/filament.css');

        Filament::registerUserMenuItems([
             UserMenuItem::make()
               ->label('2FA')
               ->url(TwoFactor::getUrl())
               ->icon('heroicon-s-shield-check'),
            UserMenuItem::make()
                ->label('Manage users')
                ->url('')
                ->icon('heroicon-s-users'),
            UserMenuItem::make()
                ->label('Manage roles')
                ->url('')
                ->icon('heroicon-s-cog'),
            UserMenuItem::make()
                ->label('Manage permissions')
                ->url('')
                ->icon('heroicon-s-key'),
        ]);
    });
}
abkrim's avatar
Level 13

I get solution

Is not a problem with my code. This is right because, why work in development and the same code not work in production?

At first, I thought of a mistake of mine in reading the Filament documentation.

But then, the strangeness of the problem came to my mind. Development yes, production no.

I do tests, but locally, and in this new project I don't have tests enabled in my GitLab yet.

I use Laravel sail, and here is the problem.

Laravel Sail does not use Nginx or apache. It uses artisan serve

So the problem was due to Nginx.

The solution is hidden in a livewire comment, since 1 year ago.

In the Nginx virtual site configuration file, in the location ~* \.(jpg|jpeg|gif|png|webp|svg|woff|woff2|ttf|css|js|ico|xml)$ {} we must add try_files $uri /index.php?$query_string;

Something like that...

location ~* \.(jpg|jpeg|gif|png|webp|svg|woff|woff2|ttf|css|js|ico|xml)$ {
        try_files $uri /index.php?$query_string;
        access_log off;
        log_not_found off;
        expires 14d;
}

The attention: that it is not the general section, do not be mistaken. With this, the question is settled.

9 likes
sferguson's avatar

Thank you @abkrim, That was exactly the solution I needed for my production setup too.

I'm on a green field Laravel 9 site and latest filament and experienced this issue on deployment, when copying my nginx configuration from sites with earlier versions of Laravel.

Please or to participate in this conversation.