Problem with Laravel site in production: livewire.js and app.js get 404

Question

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

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

I see that path is not correct. Local I've compiled 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",
        "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();

Any ideas?

Answer 1

A older issue not documented in FilamentAdmin for deploy sites with Nginx server.

Solution is add line try_files $uri /index.php?$query_string; to vitual host file in section location ~* \.(jpg|jpeg|gif|png|webp|svg|woff|woff2|ttf|css|js|ico|xml)$. Example below

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

Attention, is in this section, not in the principal section.

Problem loading Livewire.js #242