Unable to load Flux from route flux/flux.js/css

[labomatik]

What were you trying to do?

I'm trying to integrate flux inside a standard laravel app with NativePHP

What happened?

On my dev environnement all is perfect, files from flux can be loaded

After installation on windows machine here are the errors that are displayed using DevTools:

Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://127.0.0.1:8100/flux/flux.css?id=3324411c

In sentry we have more details:
filemtime(): stat failed for /Users/cris/project_nativephp/vendor/livewire/flux/src/../../flux-pro/dist/flux.css

How to reproduce the bug

Install Flux in the project
https://fluxui.dev/docs/installation

Package Versions

{
    "installed": [
        {
            "name": "nativephp/electron",
            "direct-dependency": true,
            "homepage": "https://github.com/nativephp/electron",
            "source": "https://github.com/NativePHP/electron/tree/0.8.7",
            "version": "0.8.7",
            "description": "Electron wrapper for the NativePHP framework.",
            "abandoned": false
        },
        {
            "name": "nativephp/laravel",
            "direct-dependency": false,
            "homepage": "https://github.com/nativephp/laravel",
            "source": "https://github.com/NativePHP/laravel/tree/0.6.4",
            "version": "0.6.4",
            "description": "Laravel wrapper for the NativePHP framework.",
            "abandoned": false
        },
        {
            "name": "nativephp/php-bin",
            "direct-dependency": false,
            "homepage": "https://nativephp.com",
            "source": "https://github.com/NativePHP/php-bin/tree/0.5.5",
            "version": "0.5.5",
            "description": "PHP binaries used by the NativePHP framework",
            "abandoned": false
        }
    ]
}

PHP Version

8.2.0

Laravel Version

11.34

Node Version

21.6.2

Which operating systems have you seen this occur on?

Windows

OS version

win 11Pro 24H2

Notes

No response

[amr-coding]

My guess is that you are using Laravel Herd, and if that is the case, Laravel Herd uses Nginx, which has a problem with rendering .css and .js files of the Flux UI. To resolve this, you should add the following code to your Nginx configuration.

location ~ ^/flux/flux(\.min)?\.(js|css)$ {
    expires off;
    try_files $uri $uri/ /index.php?$query_string;
}

[labomatik]

There is no Herd in nativePhp (correct me if i'm wrong), the php binary is used and chromium is loading the files
i understand that the /flux routing should be redirected to the index.php? file to have flux working...

[simonhamp]

I haven't tried to build an app with Flux yet, but I can't see why it would be a problem.

Highly unlikely that Herd has anything to do with what @labomatik is seeing.

The failing filemtime() call suggests that it either can't resolve the path or the actual file is not in that location.

Is the Flux package symlinked in some way in your development environment?

[labomatik]

Thanks Simon for your answer, i dived into flux and got similar issue also with livewire.
For livewire i just published the assets and i got .css and .js in the public folder but for flux there is nothing like that, it seems to be generated on the fly from the path /flux
and i don't know why but that generation seems to link to the dev folders /Users/cris/project_nativephp/vendor/livewire/flux/src/

[simonhamp]

It may be to do with some sort of caching. This may have something to do with a recent change. We removed the minify command, which in part removes the cached folders when it copies files over to the build root.

I will investigate. I have some theories.

[amr-coding]

Alright, I tried Livewire Flux and NativePHP on a fresh install. I was mistaken about the Laravel Herd part, but unfortunately, I couldn’t reproduce your problem, as everything seemed to work well and all the assets loaded correctly.

[XbNz]

Flux definitely works. I'm not sure if your problem is Windows-speicifc, but I'm working on an app with Flux on Mac and it works well. I haven't run the build on it yet (waiting for Simon to finish up on some obfuscation stuff), but you can try to run it with php artisan native:serve. Provide your own Flux user/pass in the auth.json after cloning.

https://github.com/XbNz/osintea

[labomatik]

The issue is happening when you build the package using php artisan native:build and you install it on another machine (macos, windows,...)
This will trigger the issue as all files are not anymore located to your local dev env.

I make it working by copy/pasting the js and css from Flux inside the public folder.