Cannot get hot reload to work with Laravel Sail, Vite and Vue 3

[matthewknill]

Describe the bug

After many hours, I have been unable to get hot reload working with Vite on Laravel Sail. The following is my vite.config.ts file:

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

import inertia from './resources/scripts/vite/inertia-layout'

export default defineConfig({
    plugins: [
        inertia(),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
        laravel(['resources/scripts/main.ts']),
        {
            name: 'blade',
            handleHotUpdate({ file, server }) {
                if (file.endsWith('.blade.php')) {
                    server.ws.send({
                        type: 'full-reload',
                        path: '*',
                    })
                }
            },
        },
    ],
    resolve: {
        alias: {
            '@': '/resources',
        },
    },
    server: {
        hmr: {
            host: 'localhost',
        },
    },
    build: {
        chunkSizeWarningLimit: 1600,
    },
})

I've also tried with:

# ...
    server: {
        host: 'localhost',
    },
# ...

And in my docker-compose.yml:

# For more information: https://laravel.com/docs/sail
# Can change default name with https://stackoverflow.com/questions/66171148/laravel-sail-how-to-change-local-dev-domain
version: '3'
services:
    laravel.test:
        build:
            context: ./docker/8.1
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.0/app
        working_dir: /var/www/html
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
            - "9865:22"
# ...

And finally my scripts in package.json:

  "scripts": {
    "build": "vite build",
    "dev": "vite",
    "heroku-postbuild": "npm run build"
  },

After running sail npm run dev, I get:

vite v2.9.14 dev server running at:

  > Local:    http://localhost:5173/
  > Network:  http://172.20.0.3:5173/

  ready in 838ms.


  Laravel v9.19.0

  > APP_URL: http://laravel.test

However, after navigating to http://localhost:8081 (I have set my APP_PORT=8081), the browser does not reload when there are changes. I am following the Laravel/Vite/Inertia format here and sail npm run build seems to build the project as expected with no errors.

Reproduction

Running sail with:

sail up -d

Then running npm dev with:

sail npm run dev

System Info

System:
    OS: Linux 5.10 Ubuntu 21.10 21.10 (Impish Indri)
    CPU: (8) x64 Intel(R) Core(TM) i7-3770K CPU @ 3.50GHz
    Memory: 23.25 GB / 25.02 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 16.16.0 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.13.2 - /usr/bin/npm
  npmPackages:
    @vitejs/plugin-vue: ^2.3.3 => 2.3.3
    vite: ^2.9.12 => 2.9.14

Using Laravel sail on Windows 10 with WSL 2...

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

Maybe you are hitting this problem?

When running Vite on Windows Subsystem for Linux (WSL) 2, if the project folder resides in a Windows filesystem, you'll need to set this option to { usePolling: true }. This is due to a WSL2 limitation with the Windows filesystem.
https://vitejs.dev/config/server-options.html#server-watch

[matthewknill]

Maybe you are hitting this problem?

When running Vite on Windows Subsystem for Linux (WSL) 2, if the project folder resides in a Windows filesystem, you'll need to set this option to { usePolling: true }. This is due to a WSL2 limitation with the Windows filesystem.
https://vitejs.dev/config/server-options.html#server-watch

I can confirm that the files reside within WSL and not on the Windows filesystem. Nevertheless, I've also tried with { usePolling: true } to no avail.

[sapphi-red]

the browser does not reload when there are changes.

Umm. Which file are you changing here?

[matthewknill]

resources/scripts/main.ts or any of the other Vue/Blade files. When I change the vite.config.ts, it tells me on the terminal that: vite.config.ts changed, restarting server... (the only file that does so), but even then the browser does not reload.

[ZarbaliyevOzal]

Maybe you are hitting this problem?

When running Vite on Windows Subsystem for Linux (WSL) 2, if the project folder resides in a Windows filesystem, you'll need to set this option to { usePolling: true }. This is due to a WSL2 limitation with the Windows filesystem.
https://vitejs.dev/config/server-options.html#server-watch

It started to work after editing vite.config.js file. but it is very slow like I can see updates after around 15 seconds
server { ... watch { usePolling: true } ... }

[Parfitarole]

Did you find a fix for this issue? I'm experiencing something similar, running npm run build compiles the assets and I can view them in the browser, running npm run dev starts the vite server but assets are not present in the browser.

[matthewknill]

It seems to be an issue with the @vite directive in blade. I set the following and it seems to work as expected:

@if(App::environment('production'))
    @vite('main')
@else
    <script type="module" src="http://localhost:5173/resources/scripts/main.ts"></script>
@endif

Obviously it would be nice though if the @vite directive worked...

[eskiesirius]

just add this in your vite.config.js

server: {
        hmr: {
            host: 'localhost',
        },
        watch: {
            usePolling: true
        }
    },

run the command npm run dev then access localhost.. when you edit a file, the changes will display after 5secs i think (very slow)

Note: I am using Docker WSL2

[eskiesirius]

@matthewknill are you still having a problem? i tried putting my project inside the wsl2 and still it worked..
vite.config.js

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',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    server: {
        hmr: {
            host: 'localhost',
        },
        watch: {
            usePolling: true
        }
    },
});

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite --host",
        "build": "vite build"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.2",
        "@vitejs/plugin-vue": "^3.0.0",
        "autoprefixer": "^10.4.7",
        "axios": "^0.27",
        "laravel-vite-plugin": "^0.5.0",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vite": "^3.0.0",
        "vue": "^3.2.31"
    },
    "dependencies": {
        "twilio-taskrouter": "^0.5.11"
    }
}

Just ignore the twilio-taskrouter

.env

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=localhost

LOG_CHANNEL=stack
LOG_DEPRECATIONS_CHANNEL=null
LOG_LEVEL=debug

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=task_router
DB_USERNAME=sail
DB_PASSWORD=password

BROADCAST_DRIVER=log
CACHE_DRIVER=file
FILESYSTEM_DISK=local
QUEUE_CONNECTION=sync
SESSION_DRIVER=database
SESSION_LIFETIME=120

MEMCACHED_HOST=memcached

REDIS_HOST=redis
REDIS_PASSWORD=null
REDIS_PORT=6379

MAIL_MAILER=smtp
MAIL_HOST=mailhog
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="hello@example.com"
MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=us-east-1
AWS_BUCKET=
AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID=
PUSHER_APP_KEY=
PUSHER_APP_SECRET=
PUSHER_HOST=
PUSHER_PORT=443
PUSHER_SCHEME=https
PUSHER_APP_CLUSTER=mt1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}"
VITE_PUSHER_HOST="${PUSHER_HOST}"
VITE_PUSHER_PORT="${PUSHER_PORT}"
VITE_PUSHER_SCHEME="${PUSHER_SCHEME}"
VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}"

SCOUT_DRIVER=meilisearch
MEILISEARCH_HOST=http://meilisearch:7700

then the rest are default

[eskiesirius]

in short,
add this in vite.config.js

server: {
        hmr: {
            host: 'localhost',
        },
        watch: {
            usePolling: true
        }
    },

then in package.json
"dev": "vite --host"

then in .env
APP_URL=localhost

[AzashiroMerume]

Could you briefly describe why this works? It worked for me, but I didn't understand why.

[dhannydw]

I'm using WSL2 and Docker Desktop with WSL2 backend.

It was not obvious for me that Vite must be executed separately (in addition to the already running PHP server). After a few hours of pulling my hair, this finally works: Here's what I encountered:

1. sail up -d
   This already allows me to access my webapp at http://localhost in Windows).
   Problem: Unused tailwindcss class names are purged. Thus, when using new class names which have not been used previously, it is not available in the resulting css.
   Solution: manually execute sail npm build (which will execute vite build)

2. modify vite.config.js and package.json as described by @eskiesirius

3. sail npm dev (which will execute vite --host)
   Now adding new tailwindcss class names will trigger hot reload, including the resulting css. Yay!! So problem number 1 solved without having to manually running vite build.

Explanation:
#1 runs the all docker containers, including the sail-app which serves our webapp at port 80 of that container mapped to port 80 in Windows.

#2 vite.config.js is the default config file that is automatically read by Vite when executed.
The HMR host is required by Laravel to construct the URL used to access the resulting CSS.
The usePolling is required because a known issue file system watching

#3 actually starts Vite in the WSL2 (not in docker container, not in Windows)
The --host argument instructs Vite to listen on all network interfaces (IP addresses), instead of the default "localhost".
As documented here, now we can access Vite at http://localhost:5173 in Windows (5173 is the default Vite's port).

• Note that without usePolling: true, we can still get the correct update by refreshing the browser manually. The bigger problem is without Vite, we have to run sail npm build to refresh the asset bundle.

Now, I can open http://localhost in Windows to access my webapp, and references to bundled assets are automatically changed to http://localhost:5173 in the HTML page.
So the web page that appears on the browser in Windows is served by:

• sail app running in docker container port 80 mapped to Windows port 80
• Vite running in WSL2 port 5173 listening on all IP addresses, can be accessed simply using localhost from Windows

Hope this helps. I wish this is at least documented in Laravel Sail, if it is not preconfigured this way.

[AzashiroMerume]

@dhannydw thx

[ferconomics]

I had a similar issue, I ran npm run dev and php artisan serve con Windows Terminal in separate tabs and hot reload did not work, had to restart the server constantly.

Fixed by closing by VS Code instance, realoaded via terminal with code . in the project folder, then I ran npm run dev and php artisan serve directly under VS Code terminal and finally got hot reload again. It happened after a recent WSL 2 update.

Hope it helps someone else.

[mike1000000000]

I'm running Laravel sail using WSL2 in Debian and following the directions, I was able to get Vite to work and refresh but it was very slow.

I found an online suggestion to run Vite in Powershell instead. This works and it's fast.

[matthewknill]

I haven't noticed it to be slow. Make sure that your project is actually in WSL2 (not in the /mnt/c mounted drive).
Can you please link what you used for anyone who's interested?

[cryocaustik]

Thank you for this reminder - this always trips me up and causes many issues.

[AAllport]

Things seem to work the moment I head into docker-desktop, find the container running laravel (for us that's via octane), clicking the terminal tab, and then run npm run dev
Before that, all we were seeing was an ERR_EMPTY_RESPONSE when trying to load resources from the dev server.

Given the involvement of sail, could this be an issue specifically be something weird with docker exec, WSL2, and port mapping?

[niodio]

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