Laravel 11 with vite: Production net::ERR_ABORTED 404 (Not Found)

I got a net::ERR_ABORTED 404 (Not Found) error when deploying to the server.

I have 2 servers, one has a public IP and a subdomain from my internet provider, and one is a local server for development which only has a local IP.

I then asked my provider to port forward to my local server so that my Laravel project could be accessed publicly.

so this is how it works:

The public IP on the first server is 11.22.33.44 with the domain sub.domain.nusa.net.id. I asked the provider so that when clients access sub.domain.nusa.net.id/local-project, they will be directed to my local server which is running the laravel project. provider has opened port 8181 and forward to my local ip.

So when I run php artisan serve --host=myiplocal --port=8181 Then my project can be displayed publicly.

Well, the problem is, I get an error net::ERR_ABORTED 404 (Not Found), the public server failed to read the assets on my local server.

when I looked at the log, it turned out the server was reading sub.domain.nusa.net.id/build WITHOUT the subdirectory defined by my provider.

So all the assets in my public project folder failed to be loaded by the browser.

What I did was:

1. Update app_url to read directly sub.domain.nusa.net.id/local-project

2. Update app/config such as app_url

3. Update vite.config, add parameters:

   server: { host: process.env.APP_URL, }

4. Run php artisan server with hosts like mylocalip, 0.0.0.0, 127.0.0.1, localhost, and more!

5. Using CORS config from laravel

6. Added $middleware->trustProxies(at: '*');

7. And much more!

here is the output and error

vite.config

import laravel from "laravel-vite-plugin";
import dotenv from 'dotenv';

dotenv.config();

export default defineConfig({
    server: {
        host: process.env.APP_URL,
    },
    plugins: [
        laravel({
            input: [
                // css
                "resources/css/app.css",
                // js
                "resources/js/app.js",

                // global
                "resources/js/global/alpine.js",
                "resources/js/global/bootstrap.js",
                "resources/js/global/chart.js",
                "resources/js/global/leaflet.js",
                "resources/js/global/simpleTables.js",

                // landing page
                "resources/js/landing/main.js",

                // capture
                "resources/js/capture/index.js",

                // collect
                "resources/js/collect/index.js",
                "resources/js/collect/add.js",
                "resources/js/collect/edit.js",
                "resources/js/collect/detail.js"
            ],
            refresh: true,
        }),
    ],
});

.env

APP_URL=https://sub.domain.nusa.net.id/local-project
ASSET_URL=https://sub.domain.nusa.net.id/local-project

I hope that the two servers can connect to each other well. Servers with public IP can retrieve data from local servers, and local servers can receive data from public servers

so, normally, it works when you just add ASSET_URL on your .env configuration. but in my case, that's not work too.

and the solution is.. just add this to AppServiceProvider.

URL::forceScheme('https');

it will force your asset to load using https. and just it