Laravel Vite on Docker - Permissions and connection refused/reset

Hi I'm having a regular repeat of an issue with Docker and Vite.

I've had this working throughout the development but a recent laptop shutdown has created an issue I can't overcome.

I can run Sail and get Docker up and running. I can then sail npm run dev and build the development files and can see a hot file created in the public folder but when I try to view the page CSS and JS doesnt load and viewing directly creates an error of Connection reset and Connection refused. The page loads as expected but CSS and JS is missing

I overcame this previously by changing ownership of node_modules folder to me as the laptop user and then deleting the folder completely and the doing sail npm install - that worked last time but isn't working now.

I've played around with the vite.config.js file to add ports but that made no difference.

What am I missing - what do I need to change to fix and stop this re-occuring? How can I ensure permssions work as expected from files created on my docker set up and carry across to the local version?

Here's my docker-compose.yml file

version: '3'
services:
  laravel.test:
    build:
      context: ./vendor/laravel/sail/runtimes/8.2
      dockerfile: Dockerfile
      args:
        WWWGROUP: 1000
        WWWUSER: 1000
    image: sail-8.2/app
    extra_hosts:
      - 'host.docker.internal:host-gateway'
    ports:
      - '${APP_PORT:-80}:80'
      - '5173:5173'
    environment:
      WWWUSER: 1000
      LARAVEL_SAIL: 1
      XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-debug}'
      XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
    volumes:
      - '.:/var/www/html'
    networks:
      - sail
    depends_on:
      - mysql
      - phpmyadmin
  mysql:
    image: 'mysql/mysql-server:8.0'
    ports:
      - '${FORWARD_DB_PORT:-3306}:3306'
    environment:
      MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
      MYSQL_ROOT_HOST: "%"
      MYSQL_DATABASE: '${DB_DATABASE}'
      MYSQL_USER: '${DB_USERNAME}'
      MYSQL_PASSWORD: '${DB_PASSWORD}'
      MYSQL_ALLOW_EMPTY_PASSWORD: 1
    volumes:
      - 'sail-mysql:/var/lib/mysql'
      - './vendor/laravel/sail/database/mysql/create-testing-database.sh:/docker-entrypoint-initdb.d/10-create-testing-database.sh'
    networks:
      - sail
    healthcheck:
      test: [ "CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}" ]
      retries: 3
      timeout: 5s
  phpmyadmin:
    image: 'phpmyadmin:latest'
    ports:
      - 8080:80
    networks:
      - sail
    environment:
      - PMA_ARBITRARY=1
networks:
  sail:
    driver: bridge
volumes:
  sail-mysql:
    driver: local

Here's my vite.config.js file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
        'resources/css/highlight.min.css',
        'resources/css/easymde.min.css',
        'resources/css/fancybox.css',
        'resources/css/file-upload-with-preview.min.css',
        'resources/css/flatpickr.min.css',
        'resources/css/font-awesome.min.css',
        'resources/css/fullcalendar.min.css',
        'resources/css/highlight.min.css',
        'resources/css/markdown-editor.css',
        'resources/css/nice-select.css',
        'resources/css/nice-select2.css',
        'resources/css/nouislider.min.css',
        'resources/css/quill.snow.css',
        'resources/css/swiper-bundle.min.css',
        'resources/css/tippy.css'
      ],
      refresh: true
    })
  ],
  server: {
    hmr: {
      host: 'localhost'
    }
  }
});

Driving me insane with it working one minute and then not the next :(

LaryAI

1 year ago

Level 58

It sounds like you're encountering issues with permissions and network configurations between your Docker container and your host machine, which is causing Vite's hot module replacement (HMR) to fail. Here are a few steps you can take to troubleshoot and resolve these issues:

1. Permissions Issue

First, let's address the permissions issue. It seems like changing the ownership of the node_modules folder helped previously. You can automate this step in your Docker setup to ensure it doesn't cause issues after a restart.

Add the following to your docker-compose.yml under the laravel.test service:

    volumes:
      - '.:/var/www/html'
      - './node_modules:/var/www/html/node_modules'

This will ensure that the node_modules folder is shared between your host and the Docker container, maintaining consistent permissions.

2. Vite Configuration

Your Vite configuration looks mostly correct, but you might need to adjust the HMR settings to ensure it works correctly with Docker. Update your vite.config.js to use the Docker container's network settings:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: [
        'resources/css/app.css',
        'resources/js/app.js',
        // Add other CSS and JS files as needed
      ],
      refresh: true,
    }),
  ],
  server: {
    hmr: {
      host: 'localhost',
      port: 5173,
    },
    watch: {
      usePolling: true,
    },
    host: '0.0.0.0',
    port: 5173,
  },
});

3. Docker Network Configuration

Ensure that your Docker container can communicate with the host machine. You might need to add the following to your docker-compose.yml:

    extra_hosts:
      - 'host.docker.internal:host-gateway'

This line is already present in your configuration, which is good. It allows the container to resolve host.docker.internal to the host machine's IP address.

4. Firewall and Network Settings

Ensure that your firewall or network settings are not blocking the ports used by Vite. You can check this by running:

sudo ufw allow 5173/tcp

5. Rebuild Docker Containers

After making these changes, rebuild your Docker containers to ensure all configurations are applied:

sail down
sail build --no-cache
sail up -d

6. Run Vite

Finally, run Vite inside your Docker container:

sail npm run dev

Summary

By ensuring consistent permissions, adjusting Vite's HMR settings, and verifying network configurations, you should be able to resolve the issues with Vite and Docker. If the problem persists, consider checking Docker logs and Vite's output for more specific error messages that could provide further insights.

I hope this helps! Let me know if you have any further questions.

Please or to participate in this conversation.