The WEB UI cannot loading its JS,CSS files

[KiddoLin]

I install clockwork to my project, but the WEB UI doesn't work. It can be open in chrome, but can't loading all js and css file. Am I missing something?

"php": "7.2.19" "laravel/framework": "5.8.29" "itsgoingd/clockwork": "4.0.5" composer require itsgoingd/clockwork successfully.

[itsgoingd]

Hey, is the 404 error returned by Laravel or your web server?

[KiddoLin]

Well, it has not other errors of Laravel or web server(nginx), only loading failed the 4 files. I find that the 4 files is loading failed on Ubuntu and CentOS, but loading successful on Windows.

[KiddoLin]

The nginx run by 'www' user, i try to change all files' owner, and clear cache and route, but the 4 files still loading failed.

PS: The web app always works.

[itsgoingd]

I mean, are the 404 response you get a nice Laravel error pages or the basic ones from nginx? That would tell you if the problem is your web server configuration or Laravel/Clockwork.

If you want to check on what's happening inside Clockwork and dd som stuff:

• this is the controller that serves the assets https://github.com/itsgoingd/clockwork/blob/master/Clockwork/Support/Laravel/ClockworkController.php#L54-L59
• this is where we resolve the asset path https://github.com/itsgoingd/clockwork/blob/master/Clockwork/Web/Web.php#L29-L36

[KiddoLin]

Oh! The 4 files' 404 response is the basic ones from nginx. It is my nginx default configuration:

  location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
  }

The JS,CSS files was be disabled executing on more web server.Maybe the 4 files' suffix should be changed?

[itsgoingd]

You will need to add an exception for /__clockwork/*.

Alternatively you could just copy these files to you public directory, but then it's up to you to keep them up to date, otherwise you'll get stuck on older web UI version. They can change pretty often, that's why we serve them via php in the first place.

[KiddoLin]

OK. I will add an exception to nginx configuration.

This problem maybe make some novices puzzling, because it is easy to ignore the web server default configurations for someone (like me. Aha...). I think it is handy for development if the URI of JS and CSS files can be changed to other formats, like: /__clockwork/css/app.360cd53d /__clockwork/js/chunk-vendors.cdd797ba

// Clockwork\Web\Web@resolveAssetPath methods

protected function resolveAssetPath($path)
{
    $path = $this->getRealPath($path);
    $publicPath = realpath(__DIR__ . '/public');
    $path = realpath("$publicPath/{$path}");
    return strpos($path, $publicPath) === 0 ? $path : false;
}

protected function getRealPath($path)
{
    $fileType = explode('/', $path)[0];
    if (in_array($fileType, ['js', 'css'])) {
        $path = "$path.$fileType";
    }
    return $path;
}

[williamqian]

OK. I will add an exception to nginx configuration.

This problem maybe make some novices puzzling, because it is easy to ignore the web server default configurations for someone (like me. Aha...). I think it is handy for development if the URI of JS and CSS files can be changed to other formats, like: /__clockwork/css/app.360cd53d /__clockwork/js/chunk-vendors.cdd797ba

// Clockwork\Web\Web@resolveAssetPath methods

protected function resolveAssetPath($path)
{
    $path = $this->getRealPath($path);
    $publicPath = realpath(__DIR__ . '/public');
    $path = realpath("$publicPath/{$path}");
    return strpos($path, $publicPath) === 0 ? $path : false;
}

protected function getRealPath($path)
{
    $fileType = explode('/', $path)[0];
    if (in_array($fileType, ['js', 'css'])) {
        $path = "$path.$fileType";
    }
    return $path;
}

I have met the same problem as yours, all the js/css are 404 if loaded from the script/link tags，but can be opened in new tab.Could you show me your final nginx cofiguration please？

[KiddoLin]

@williamqian emmm...Finally, I remove the rules about JS and CSS in local/dev/testing ENV. Remember to reload your nginx service.

[williamqian]

@williamqian emmm...Finally, I remove the rules about JS and CSS in local/dev/testing ENV. Remember to reload your nginx service.

haha,so did I ,thanks

[sachinrcrm]

I am facing same issue. I am using xampp. How and where should I add exception?

[JulianMar]

Would be really cool to have a command like php artisan vendor:publish --tag=clockwork-assets.

This would work for nginx and apache users. Horizon is publishing it's assets like this https://laravel.com/docs/8.x/packages#public-assets

[ARehmanMahi]

If you must cache assets, then update the rule so it ignores clockwork.

location ~* ^(?!/clockwork/).*\.(ttf|woff|woff2|css|js|gif|jpe?g|png|svg|webp)(\?[0-9]+)?$ {
        expires 1y;
        add_header Cache-Control "public, max-age=31536000, s-maxage=31536000, immutable";
}

This worked for me, though I wanted a seperate rule, but even if the above rules body is empty, the clockwork assets wouldn't return.