Note: This solution breaks paths when your application is cached.

If you have set up FilamentPHP Admin panel on an existing project, you may want to use a different subdomain, instead of a path, to access it. The documentation outlines this exact use-case;

use Filament\Panel;

public function panel(Panel $panel): Panel
{
	return $panel
		// …
		->domain('admin.example.com');
}

However, I ran into an issue where the CSS and JavaScript assets are loaded using the primary domain. This works fine for most cases but an Cross-Origin Resource Sharing (CORS) error appears when using certain provided functionality.

Behind the scenes, the AlpineComponent uses the Laravel asset() helper to load the front-end JavaScript and CSS. This uses the APP_URL defined in the .env and in the case of an existing project, this was the main website URL.

When using the searchable() method on the SelectFilter component, the interface was broken. This is because AlpineJS is trying to inject a JavaScript file, but CORS was stopping this from happening.

My initial thought was to add the subdomain to the Laravel CORS config and let the middleware handle the request. However, this doesn't work because the requested JavaScript file is not routed through PHP and is instead a static file.

To solve this you should modify the CORS settings in your web server, such as Apache or nginx. However, this might not be possible with your hosting provider.

Thankfully, I have found a solution that works within the domain() method of the Panel builder;

->domain(value(static function (): string {
    $domain = 'https://subdomain.example.com';
    URL::forceRootUrl($domain);
    return $domain;
}))