Wrong ASSET url

[silk spoke]

Hi!

I am currently trying to share my website using ngrok via Laravel Valet. When sharing the ngrok URL, I keep loading the .test domain asset urls instead of the ngrok.io url. Because ngrok loads the .test files (which are not accessible by others) the page returns white.

I am using VITE, Vue.js and Inertia. How could I solve this issue?

VITE config:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
                'resources/css/app.css',
                'resources/css/mail.css',
                'nova-components/GetLatestShippingInformation/resources/css/tool.css',
                'nova-components/GetLatestShippingInformation/resources/js/tool.js',
            ],
            refresh: true,
            valetTls: 'whols.test',
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    optimizeDeps: {
        include: [
            "@fawmi/vue-google-maps",
            "fast-deep-equal",
        ],
    },
});

[hot badge]

I think you should be able to set ASSET_URL to the correct URL when sharing. Don't have too much experience with sharing a website with ngrok to have an automated solution for this, but changing a .env variable is not too much effort.

[silk spoke]

Changing the .env variable seems to not work either. The asset url stays the same. Could this be an issue since I am using @vite() instead of asset()?

[hot badge]

Hmm, can you try changing the valetTls value to your ngrok domain? Or perhaps try to unset that

[silk spoke]

Also after ensuring via valet it does not work unfortunately.

[hot badge]

Ah yeah that makes sense

And by removing the valetTls completely from your config?

[silk spoke]

That seems to change the value to 127.0.0.1 instead of my test variable.

But still not the desired solution

[hot badge]

Let me just try to fire up ngrok myself see if I can get it working

[silk spoke]

Appreciate it!

[fossil garnet]

I keep loading the .test domain asset urls instead of the ngrok.io url
That would be correct, as Vite isn't aware of it being proxied. So you'd have to configure Vite so it'll generate URLs from the proxy instead of the local URL. That's essentially what Laravel does with the valetTls option, except you'd have to set the options yourself in the Vite config. I think these docs might help you here: https://vitejs.dev/config/server-options.html

Another option, which would have my preference, just build your assets instead of using the dev server. This makes it a whole lot easier as you don't have to deal with the dev server and proxying the request correctly. Though, you'll loose a bit of dev / debugging convenience. But if you just want to show the project to others that's imo a better approach

[silk spoke]

I'd rather choose this option. So you'll need to specify the following in the vite.config.js?:

    server: {
        origin: 'https://aed7-144-178-64-101.ngrok.io',
    },

[fossil garnet]

I think so, I'm not entirely sure (haven't used ngrok and haven't proxied Vite). You might want to take a look at Laravel's plugin source, see what options they set for Valet, because that's kinda how you should set the config. Vite should just use that domain. Though, you probably also have to open another ngork instance (Vite doesn't go through valet either), it runs on a different port

[silk spoke]

I'll check if Arko has a solution, if not then I've tried everything 🙂

[hot badge]

Robert is a lot smarter than me, but I'll play around with the Vite config a bit. Don't need ngrok that often, but wouldn't mind learning how to have it play nicely with Vite.

[fossil garnet]

And then Arko finally has a chance to use Vite

[hot badge]

I'm using Vite in my WordPress themes, don't worry

[silk spoke]

Haha 🙂 keep me posted!

[silk spoke]

Hi @hot badge (soz for ping), did you find any solution? If not, we can close this thread.

[hot badge]

Hey, no worries. Kinda forgot about trying it, haha. So unfortunately not.