can't open project routes after 'npm run dev' in laravel vite with laradock

@faridfr Yeah you would never use npm run dev in production. What I am saying is that while developing there are 2 servers. 1 is for laravel and one is for vite. You use the laravel one and laravel uses the vite one (in blade)

VIte does not write to any files when in dev mode. It injects the js and css directly into the website.

How are you checking the hot reloading? Are you seeing any errors in the console?

@Sinnbeck

• docker containers is up
• npm run dev run with this results :

• when I open localhost with port 5173 I saw images in question
• when I open APP_URL I saw project routes but very slow and with blank screen with js load errors.

@faridfr Most likely due to cors. You are running the site on https and the vite dev server on http

https://laravel.com/docs/9.x/vite#working-with-a-secure-development-server

@Sinnbeck

Unfortunately not work. Maybe this image can help :

@faridfr Ah I can see in your url that you are in fact not running the site with https. Try setting https: false, and try again. What error is it giving now?

@Sinnbeck due to my npm run dev results that I sent here, Vite running with http. But to be sure I set it manually in vite.config and the result are the same.

@faridfr So if you turn off https (false) it is still saying empty response in the error?

@Sinnbeck Yes

Try adding this inside the server: {}

        hmr: {
            host: '127.0.0.1',
        },

so it looks like this

    server: {       
        hmr: {
            host: '127.0.0.1',
        },
       host: '127.0.0.1'.
    },

@Sinnbeck

I tried with: 127.0.0.1, localhost, and 0.0.0.0 but every time results are same ( empty response in errors with these URLs )

Here is my vite.config :

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

export default defineConfig({
    server: {
        hmr: {
            host: '127.0.0.1',
        },
       host: '127.0.0.1',
    },
    plugins: [
        laravel({
            input: 'resources/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

@faridfr and still empty response error?

@Sinnbeck Yes

@faridfr is this on windows?

@Sinnbeck Yes

@faridfr I found this tread with the exact same issue, but sadly the solution there is the same as you have already tried it seems: https://laracasts.com/discuss/channels/vite/breeze-and-vite-in-wsl2-does-not-load-css-or-js

@laksh Are you running npm run dev inside of docker? Which container? Is the port open on that container?

@Sinnbeck yes. I added 5173 on workspace ports and I wrote commands on the workspace.

@faridfr What do you get if you open

http://localhost:5173/resources/js/app.js

in the browser? Any content? Is the path and filename correct?

@Sinnbeck

@faridfr Ok I honestly dont know. If you can get that url to show your content it all should start working.

Maybe try just this

server: {       
        hmr: {
            host: '127.0.0.1',
        },
    },

@makowskid tks, for your time!

@makowskid Thank You, it works for me

@makowskid Thanks a lot! This made it work for me.

@makowskid why its not working for me