Php versions – Laravel Websockets dashboard base path with sub folder not working

I am quite new to broadcasting/websockets and I am attempting to set up Laravel Websockets and pusher.

Using my subdomain.example.com I can get subdomain.example.com/laravel-websockets working and events get listed on the screen when I fire them using php artisan tinker and when I create an event on the page. However I need this work inside a path subdomain.example.com/api/laravel-websockets

When I try the url with /api although it loads the dashboard as expected it fails to connect and from looking in the console I can see it is ignoring the /api in its requests, e.g. for Auth: http://subdomain.example.com/laravel-websockets/auth instead of http://subdomain.example.com/api/laravel-websockets/auth. This applies to everything in the console. Even when I edit the request in the console to add the /api it works.

Is there somewhere I can change the base path?

Here is my .env file:

APP_URL=http://subdomain.example.com/api/

LOG_CHANNEL=daily

BROADCAST_DRIVER=pusher
CACHE_DRIVER=file
SESSION_DRIVER=file
QUEUE_DRIVER=sync

REDIS_HOST=127.0.0.1
REDIS_PASSWORD=null
REDIS_PORT=6379

APP_NAME==test
PUSHER_APP_ID=1234
PUSHER_APP_KEY=1234
PUSHER_APP_SECRET=secret
PUSHER_APP_CLUSTER=mt1

Here is my config/websockets.php pusher config

'dashboard' => [
    'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001),
],

'apps' => [
    [
        'id' => env('PUSHER_APP_ID'),
        'name' => env('APP_NAME'),
        'key' => env('PUSHER_APP_KEY'),
        'secret' => env('PUSHER_APP_SECRET'),
        'enable_client_messages' => true,
        'enable_statistics' => true,
    ],
],

and my config/broadcasting.php

    'driver' => 'pusher',
    'key' => env('PUSHER_APP_KEY'),
    'secret' => env('PUSHER_APP_SECRET'),
    'app_id' => env('PUSHER_APP_ID'),
    'options' => [
        'cluster' => env('PUSHER_APP_CLUSTER'),
        'encrypted' => true,
        'host' => '127.0.0.1',
        'port' => 6001,
        'scheme' => 'http'
    ],
],

Edit: Adding my config to show how /api is working where /var/www/example is the root folder of my Laravel application

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    ServerName subdomain.example.com
    ServerAlias subdomain.example.com
    Alias /api /var/www/example/public
    <Directory /var/www/example/>
            Options Indexes FollowSymLinks
            AllowOverride All
            Require all granted
            RewriteEngine On
    </Directory>

    DocumentRoot /var/www/example/client-side
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

in public/.htaccess I have the following:

 RewriteBase /api/

Edit

I see that I can get this working if I add api/ to the javascript request paths right in the dashboard.blade.php which makes me think the solution is have a version of that file running. However I dont think this solves the overall issue. I would rather do this correctly. (see authEndpoint below)

     connect() {
            this.pusher = new Pusher(this.app.key, {
                wsHost: this.app.host === null ? window.location.hostname : this.app.host,
                wsPort: this.port === null ? 6001 : this.port,
                wssPort: this.port === null ? 6001 : this.port,
                wsPath: this.app.path === null ? '' : this.app.path,
                disableStats: true,
                authEndpoint: '/api/{{ request()->path() }}/auth',
                auth: {
                    headers: {
                        'X-CSRF-Token': "{{ csrf_token() }}",
                        'X-App-ID': this.app.id
                    }
                },
                enabledTransports: ['ws', 'flash']
            });