Vite + Herd Share

[nathangross]

Context: Laravel 9.52

If I fun npm run dev and (in another terminal tab) herd share my site loads fine except for the .css and .js files handled by vite.

local domain: example.test
herd share (expose) domain: example.us-1.sharedwithexpose.com
css/js assets: https://example.test:5173/resources/css/app.css (fails to load)

This seems to be a CORS issue which makes sense, but how can I solve this? If I run npm run build that solves my issue, but I have to build after every single change.

How can I get herd share and vite to be on the same page?

[miagg]

The reason it fails is because npm run dev will spin a server to host your assets like css and js available through port 5173 so that it can hot-reload them. When using herd share you only proxy port 80 or 443 depending on your configuration. So your styles and scripts won't be available.

If you want to develop while testing with herd share I recommend to run vite build -w instead which will build your assets constantly while making changes.

[nathangross]

Ah nice! I didn't realize you could --watch assets using build.

For anyone following along, here is what I added in my vite.config.js in a Laravel project to get this to work:

 build: {
        watch: {
            include: ["resources/**"],
        },
    }

So the whole thing might look like this:

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js", "resources/css/admin.css"],
            refresh: true,
        }),
    ],
    build: {
        watch: {
            include: ["resources/**"],
        },
    }
});

[douglasgough]

Assuming I understood the problem correctly, I got it working by setting the server:hmr:host to the URL of my site in Herd.

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
],
server: {
hmr: {
host: 'shopifyapp.test'
}
}
});

[deriegle]

Just found another solution. If you update your application's APP_URL in your .env to your Expose URL. This will cause Vite to pick up the correct URL and seems to fix the CORS issues. I assume it works the same way as @douglasgough's solution.

[benmcm1994]

I'd have to change the APP_URL every hour then on the free version