Filament•3mo ago

Tailwindcss Does not Load on the production server

Am deploying a laravel website on a subdomain on a cpanel I do run npm run build and the css compiles but the css files to load on my prodction server when I check the console I find this

 http://127.0.0.1:5173/@vite/client net::ERR_BLOCKED_BY_CLIENT
public/:24 
        
        
       GET http://127.0.0.1:5173/resources/css/app.css net::ERR_BLOCKED_BY_CLIENT on the production server the css does not load

 http://127.0.0.1:5173/@vite/client net::ERR_BLOCKED_BY_CLIENT
public/:24 
        
        
       GET http://127.0.0.1:5173/resources/css/app.css net::ERR_BLOCKED_BY_CLIENT on the production server the css does not load

I have tried solutions on the internet but seems none is working for me at the moment

18 Replies

christmex•3mo ago

u run the npm build on ur server right? not on ur local machine?

codeartisan•3mo ago

i ran npm run on the localmachine

christmex•3mo ago

make sure the APP_URL already correct, same with domain name using git?

codeartisan•3mo ago

just uploaded from my local

christmex•3mo ago

is the build folder there?

codeartisan•3mo ago

I see it there in public

christmex•3mo ago

or try to run the npm build direcly on ur server

codeartisan•3mo ago

with the assets

APP_NAME=FountainofPeace
APP_ENV=production
APP_KEY=base64:hrMxGKvHCplOGZAlGxFjjGdHY9IrBWmggYHYPr0Y584=
APP_DEBUG=false
APP_URL=https://dummy.fountainofpeace.org.ug/

ASSET_URL = http://dummy.fountainofpeace.org.ug/public

APP_NAME=FountainofPeace
APP_ENV=production
APP_KEY=base64:hrMxGKvHCplOGZAlGxFjjGdHY9IrBWmggYHYPr0Y584=
APP_DEBUG=false
APP_URL=https://dummy.fountainofpeace.org.ug/

ASSET_URL = http://dummy.fountainofpeace.org.ug/public

server does not have node installed

christmex•3mo ago

i faced the same issue, i dont have npm on my server and i upload it using git

christmex•3mo ago

first time it doesntwork but i read something here https://laraveldaily.com/post/laravel-vite-manifest-not-found-at-manifest-json

Laravel Daily

Laravel: "Vite manifest not found at manifest.json" - What To Do?

christmex•3mo ago

i understand that the build folder is not provided in my server so maybe u can read the article first and make sure everything is correct lemme know, if u still having the same issue

codeartisan•3mo ago

ok I have everything here But I cannot npm run build on the server

christmex•3mo ago

Can u show me ur app layout? Also, can I access it online? Wanna see it fiest

codeartisan•3mo ago

http://dummy.fountainofpeace.org.ug/ thats the website

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
            @vite(['resources/css/app.css', 'resources/js/app.js'])

</head>

<body>

    @include('partials.header')
    <div class="content">
        @yield('content')
    </div>

    @include('partials.footer')
    <!-- Add your scripts here -->

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title')</title>
            @vite(['resources/css/app.css', 'resources/js/app.js'])

</head>

<body>

    @include('partials.header')
    <div class="content">
        @yield('content')
    </div>

    @include('partials.footer')
    <!-- Add your scripts here -->

</body>

</html>

christmex•3mo ago

here is mine can u try it?

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8" />

        <meta name="application-name" content="{{ config('app.name') }}" />
        <meta name="csrf-token" content="{{ csrf_token() }}" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

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

        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>

        @filamentStyles
        @vite('resources/css/app.css')
    </head>

    <body class="antialiased">
        {{ $slot }}

        @livewire('notifications')

        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8" />

        <meta name="application-name" content="{{ config('app.name') }}" />
        <meta name="csrf-token" content="{{ csrf_token() }}" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

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

        <style>
            [x-cloak] {
                display: none !important;
            }
        </style>

        @filamentStyles
        @vite('resources/css/app.css')
    </head>

    <body class="antialiased">
        {{ $slot }}

        @livewire('notifications')

        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>

please make the asset_url also in https

codeartisan•3mo ago

same issue

christmex•3mo ago

in ur vite.config.js, try this

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

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

then ur tailwind.config.js

import preset from './vendor/filament/support/tailwind.config.preset'
 
export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

import preset from './vendor/filament/support/tailwind.config.preset'
 
export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

after that try to run the npm run build again

codeartisan•3mo ago

okay am not using filament or livewire just am working with laravel starter blade template it was just a sample site

Gaming

Programming

Tailwindcss Does not Load on the production server