WSL2 + Laravel Bootcamp w/ Inertia (Vue) fails to load when npm run dev is running

I have Docker Desktop (4.18.0) and Ubuntu (22.04) (WSL 2) installed on my Windows 11 (22H2) machine.

Steps to reproduce the problem

Follow the steps on Laravel Bootcamp. Specifically, I was using the Docker instructions for Inertia with Vue.
```
curl -s "https://laravel.build/chirper" | bash
cd chirper
sail up -d
sail composer require laravel/breeze --dev
sail artisan breeze:install vue
sail artisan migrate
```
At this point everything works. I can visit localhost and get the starting page.
However, when I run sail npm run dev to enable hot reloading while developing the Vite files, and visit localhost, nothing loads. It loads a blank white page. Inspecting the network requests, it appears to load the base HTML file, but it is trying to load the Vite files from 0.0.0.0:5173 instead of 127.0.0.1:5173.

How can I solve this issue? Is there some configuration setting I need to change? Running sail npm run build successfully builds the files and I can see the results of my changes, but it is quite annoying if I cannot use sail npm run dev to instantly see the changes.

Laravel 10.6.2

ruggmatt

3 years ago

Level 1

I had to add the following to get vite to load correclty

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
    server: {
        hmr: {
            host: 'localhost'
        }
    }
   // ....
});

3 likes

MostafaFayazi

3 years ago

Level 1

@ruggmatt that fixed it

Please or to participate in this conversation.