Dockerized Laravel after the 'The Docker Tutorial' no Hot Swapping with Vite

I did the 'The Docker Tutorial' series, implemented my own project and most of it works fine. Then installed Tailwind, following the Tailwind instructions for Laravel. I have the @vite('resources/css/app.css') directive in my head-Tag. When i change something in the frontend and save the change, module hot swapping doesn't work. In my browser terminal i get the messages: GET http://127.0.0.1:5173/@vite/client net::ERR_EMPTY_RESPONSE GET http://127.0.0.1:5173/resources/css/app.css net::ERR_EMPTY_RESPONSE After searching online, looking at old similar threads and chatting with lary, this is my docker-compose.yml

version: '3.8'

services:
    nginx:
        build:
            context: .
            dockerfile: nginx.dockerfile
        ports:
            - 80:80
        volumes:
          - ./src:/var/www/html
        depends_on:
          - mysql
          - php

    mysql:
      image: mariadb:10.5
      ports:
        - 3306:3306
      environment:
        MYSQL_DATABASE: laravel
        MYSQL_USER: laravel
        MYSQL_PASSWORD: secret
        MYSQL_ROOT_PASSWORD: secret
      volumes:
        - ./mysql:/var/lib/mysql
    
    php:
      build:
        context: .
        dockerfile: php.dockerfile
      volumes:
        - ./src:/var/www/html
    
    composer:
      build:
        context: .
        dockerfile: composer.dockerfile
      volumes:
        - ./src:/var/www/html
      working_dir: /var/www/html
    
    npm: 
      image: node:current-alpine
      ports:
        - 3000:3000
        - 5173:5173 #tried adding the port which doesn't answer
      volumes: 
        - ./src:/var/www/html
      entrypoint: ["npm", "run", "dev"] #starts npm run dev in the original container without having to use docker run
      working_dir: /var/www/html

    artisan:
      build:
        context: .
        dockerfile: php.dockerfile
      volumes:
        - ./src:/var/www/html
      working_dir: /var/www/html
      depends_on:
        - mysql
      entrypoint: ["php", "/var/www/html/artisan"]

LaryAI

2 years ago

Best Answer

Level 58

It looks like you're trying to set up hot module replacement (HMR) with Vite in a Dockerized Laravel environment. The issue you're encountering is likely due to the fact that Vite's development server is not properly exposed or configured to work with Docker.

Here's what you can do to fix the issue:

Ensure that Vite's server is binding to 0.0.0.0 instead of localhost or 127.0.0.1. This is important because Docker's networking requires services to bind to 0.0.0.0 to be accessible from outside the container.
Make sure that the ports Vite uses for HMR are correctly exposed and mapped in your docker-compose.yml file.
Configure Vite to correctly recognize the host and port from the client side.

Here's an updated docker-compose.yml snippet that should help:

services:
    # ... other services ...

    npm: 
      image: node:current-alpine
      ports:
        - 3000:3000
        - 5173:5173
      volumes: 
        - ./src:/var/www/html
      environment:
        - HOST=0.0.0.0
        - PORT=5173
      entrypoint: ["npm", "run", "dev"]
      working_dir: /var/www/html

And in your Vite configuration (vite.config.js), you should have something like this:

export default {
  server: {
    host: '0.0.0.0',
    port: 5173,
    hmr: {
      // If you're running Vite on a different host than your frontend, you may need to set the client URL explicitly
      clientPort: 5173,
      // Use the public hostname of your Docker service for HMR to work properly
      host: process.env.HMR_HOST || 'localhost',
    },
  },
  // ... other configurations ...
};

If you're running the Docker containers on your local machine, you might not need to change the HMR_HOST. However, if you're running Docker on a remote server or a virtual machine, you'll need to set HMR_HOST to the public IP or hostname of your server.

Finally, make sure that your Laravel application is pointing to the correct URL for the Vite HMR client. In your Blade template, you should have something like this:

@vite(['resources/css/app.css', 'resources/js/app.js'])

This should automatically point to the correct Vite server URL, but if it doesn't, you may need to manually specify the Vite HMR client script URL in your Blade layout:

<script type="module" src="http://localhost:5173/@vite/client"></script>

Replace localhost with your Docker host's IP address if necessary.

After making these changes, restart your Docker containers and check if HMR is working. If you're still facing issues, you may need to check the network settings of your Docker environment and ensure that there are no firewalls blocking the necessary ports.

1 like