Docker + Vite refresh (HMR)

Hi @tykus, this is my docker-compose.yml

version: "3.5"

services:

  https-portal:
    image: steveltn/https-portal:${HTTPS_PORTAL_VERSION}
    environment:
      DOMAINS: >
        dockerbox.test -> http://nginx:80,
        phpmyadmin.dockerbox.test -> http://phpmyadmin:80,
        mailcatcher.dockerbox.test -> http://mailcatcher:1080,
        phpredisadmin.dockerbox.test -> http://phpredisadmin:80,
        ${EXTRA_SITES}
      CLIENT_MAX_BODY_SIZE: 1024M
      SERVER_NAMES_HASH_BUCKET_SIZE: 1024
      STAGE: local
    volumes:
      - https-portal_certs:/var/lib/https-portal
      - https-portal_logs:/var/log/nginx
    ports:
      - 80:80
      - 443:443
      - 3000:3000
    networks:
      default:
        aliases:
          - dockerbox.test
    depends_on:
      - nginx
      - phpmyadmin
      - mailcatcher

  mariadb:
    image: mariadb:${MARIADB_VERSION}
    environment:
      - MYSQL_ROOT_PASSWORD=${MYSQL_ROOT_PASSWORD}
      - MYSQL_DATABASE=${MYSQL_DATABASE}
      - MYSQL_USER=${MYSQL_USER}
      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
    volumes:
      - mariadb_data:/var/lib/mysql
    expose:
      - 3306

  nginx:
    build:
      context: .
      dockerfile: Dockerfile.nginx.dev
      args:
        - NGINX_VERSION=${NGINX_VERSION}
    volumes:
      - ./nginx/:/etc/nginx/conf.d/
      - ./sites:/var/www/html:delegated
    expose:
      - 80
      - 3000
    depends_on:
      - php

  php:
    hostname: php
    build:
      context: .
      dockerfile: Dockerfile.php.dev
      args:
        - PHP_VERSION=${PHP_VERSION}
        - ALPINE_VERSION=${ALPINE_VERSION}
    environment:
      - php.display_errors=on
      - php.error_reporting=E_ALL
      - PHP_XDEBUG_MODE=develop
      - PHP_XDEBUG_REMOTE_HOST=${XDEBUG_REMOTE_HOST}
      - PHP_XDEBUG_REMOTE_PORT=9000
      - PHP_XDEBUG_REMOTE_CONNECT_BACK=yes
      - PHP_XDEBUG_IDEKEY=docker
    volumes:
      - ./sites:/var/www/html:delegated
    depends_on:
      - mariadb
      - redis

  phpmyadmin:
    image: phpmyadmin:${PHPMYADMIN_VERSION}
    environment:
      - PMA_HOST=mariadb
      - PMA_PORT=3306
      - PMA_ABSOLUTE_URI=https://phpmyadmin.dockerbox.test
      - PMA_USER=root
      - PMA_PASSWORD=${MYSQL_ROOT_PASSWORD}
      - UPLOAD_LIMIT=1g
    expose:
      - 80
    depends_on:
      - mariadb

  redis:
    image: redis:${REDIS_VERSION}-alpine
    volumes:
      - redis_data:/data
    expose:
      - 6379

  mailcatcher:
    image: stpaquet/alpinemailcatcher:${MAILCATCHER_VERSION:-latest}

  phpredisadmin:
    image: erikdubbelboer/phpredisadmin:${PHPREDISADMIN_VERSION:-latest}
    environment:
      - REDIS_1_HOST=redis
      - REDIS_1_NAME=dockerbox
      - REDIS_1_PORT=6379
    expose:
      - 80
    depends_on:
      - redis

volumes:
  https-portal_certs:
  https-portal_logs:
  mariadb_data:
  redis_data:

@DanielTamargo Which container are you running npm run dev inside ?

@Sinnbeck inside php container, that container's volume contains my laravel apps, and inside them I run the npm run dev

Example:

docker-compose exec php /bin/bash
cd test
npm run dev

@DanielTamargo You need to open the port on the container then. And set server hmr to listen for all

ports:
  - 5173:5173

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

@Sinnbeck gonna try this as soon as I'm at my home, thanks for replying tho!

Awesome community

@Sinnbeck I've been modifying this file a lot, now is quite simple I guess I need to add some config

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: [{
                paths: [
                    'resources/views/**',
                ],
                //config: { delay: 300 }
            }],
        }),
    ],

    // I've been trying different configs but no idea
    
    server: {
        //origin: 'http://127.0.0.1:8080',
        //host: 'test.dockerbox.test',
        //https: true,
        
        //watch: {
        //    usePolling: true,
        //},
        
        // hmr config: https://vitejs.dev/config/server-options.html#server-hmr
    },
    
});

@bmonsales negative 😥, I tried with different options and ports but didn't manage to solve it.

I ended up using Laravel Sail when I want to develop using HMR, basically when I have to develop the layout and I don't want to reload the page everytime I add/remove an element or a class.

Since Sail doesn't work with HTTPS, as a fast way to disable/enable HTTPS force scheme I'm using a variable in .env file named LARAVEL_SAIL and I set it to true or false. Then in AppServiceProvider.php:

public function boot()
{
    // Force HTTPS when navigating
    // Note: Sail doesn't work on HTTPS
    if ( App::isProduction() ||  env('SAIL_UP', false) !== true ) {
        \Illuminate\Support\Facades\URL::forceScheme('https');
    }
}

Hope you find a way, I will try again once I have some free time and will come back with the solution if I find it.