Docker + Laravel + Vite + Vue

Hello everyone!

There is a Laravel + Vite + Vue application, I am trying to use Docker.

The problem now is that it is not possible to see the changes when editing the Vue file, even when reloading the page, only by running 'npm run dev' for it.

I don't understand much about Docker, I try to do a lot intuitively, I don't quite understand everything that is already there now, but it almost works.

docker-compose.yml

version: '3.8'
networks:
  frontend:
    driver: bridge
  backend:
    driver: bridge
services:
  app:
    build:
      context: .
      dockerfile: dockerfiles/php.Dockerfile
    volumes:
      - .:/var/www/laravel:delegated
    ports:
      - "3000:3000"
      - "3001:3001"
      - "5173:5173"
      - "8080:8080"
    networks:
      - frontend
      - backend

  nginx:
    image: nginx:stable-alpine
    ports:
      - "80:80"
    volumes:
      - ./nginx.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - app
    networks:
      - frontend
      - backend

php.Dockerfile

I simplified it here, the application is deployed locally too, so there is no composer install.

FROM php:8.2-fpm-alpine

WORKDIR /var/www/laravel

COPY . .

RUN apk update && \
    apk add --no-cache nodejs npm

RUN docker-php-ext-install pdo pdo_mysql

RUN npm install
RUN chown -R www-data:www-data /var/www/laravel/storage /var/www/laravel/bootstrap/cache

vite.config.js

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

export default defineConfig({
    server: {
        host: '0.0.0.0',
        port: 5173,
        hmr: {
            protocol: 'ws',
            clientPort: 5173,
            host: 'hicaliber.test',
        },
        watch: {
            usePooling: true
        },
    },
    plugins: [
        vue(),
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
            force: true
        }),
    ],
});

nginx.conf

server {
    listen 80;
    index index.php index.html;
    server_name hicaliber.test;
    root /var/www/laravel/public;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }

    location ~ /\.ht {
        deny all;
    }
}

Executed commands

docker-compose up -d

docker-compose exec app npm run dev

But after edits on the local machine, the changes are not visible.

I also tried to run 'npm run dev' on a local machine, then everything works as it should.