Chron's avatar
Level 6

Laravel and Vite in Docker doesn't work

Good day, everyone!

I'm using Laravel 10.26.2 and I've been trying to configure vite refresh.

I'm using docker-compose to run my Laravel applications and it seems that vite cannot connect properly to my client so it cannot auto-refresh my page when I make changes.

This is my docker-compose.yml

version: "3.8"
name: "laravite"

services:
  nginx:
    container_name: nginx
    image: nginx:stable-alpine
    ports: 
      - "80:80"
    networks:
      - laravel
    volumes:
      - ../devcontainer/nginx/default.conf:/etc/nginx/conf.d/default.conf
      - ./:/var/www/html
  php:
    container_name: php
    build:
      context: ../devcontainer/dockerfiles
      dockerfile: php.dockerfile
    user: "1000:1000"
    ports: 
      - "9000:9000"
    volumes:
      - ./:/var/www/html:delegated
    depends_on:
      - db
    networks:
      - laravel
  db:
    container_name: db
    image: mysql:8
    restart: always
    ports: 
      - "3306:3306"
    networks:
      - laravel
    volumes:
      - ../devcontainer/mysql:/var/lib/mysql
    environment:
      MYSQL_ROOT_PASSWORD: r0O+
      MYSQL_DATABASE: laravite
  phpmyadmin:
    container_name: phpmyadmin
    image: phpmyadmin/phpmyadmin
    restart: always
    environment:
      PMA_HOST: db
      PMA_USER: root
      PMA_PASSWORD: r0O+
    ports:
      - "6975:80"
    networks:
      - laravel
    depends_on:
      - db
  composer:
    container_name: composer
    image: composer:lts
    user: "1000:1000"
    working_dir: /var/www/html
    entrypoint: ['composer', '--ignore-platform-reqs']
    volumes:
      - ./:/var/www/html
    networks:
      - laravel
    depends_on:
      - php
  npm:
    container_name: npm
    image: node:lts-alpine
    working_dir: /var/www/html
    tty: true
    ports:
       - "3000:3000"
       - "3001:3001"
       - "5173:5173"
    volumes:
      - ./:/var/www/html
    entrypoint: ['npm']
    networks:
      - laravel
  art:
    build: 
      context: ../devcontainer/dockerfiles
      dockerfile: php.dockerfile
    container_name: artisan
    user: "1000:1000"
    volumes:
      - ./:/var/www/html
    entrypoint: ['php', '/var/www/html/artisan']
    networks:
      - laravel
    depends_on:
      - php
      - db
networks:
  laravel:

This is my vite.config.js

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

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/sass/app.scss', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Here's package.json

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite --host 0.0.0.0",
        "build": "vite build"
    },
    "devDependencies": {
        "@popperjs/core": "^2.11.6",
        "axios": "^1.1.2",
        "bootstrap": "^5.2.3",
        "laravel-vite-plugin": "^0.8.0",
        "sass": "^1.56.1",
        "vite": "^4.0.0"
    },
    "dependencies": {
        "bootstrap": "^5.3.2",
        "vue": "^3.3.4"
    }
}

I get no errors when I run docker compose run --rm npm run dev but scss and js are not loaded, I'm getting NS_ERROR_CONNECTION_REFUSED, so I'm really lost.

0 likes
1 reply
imsat's avatar

My npm service.

  npm:
      image: node:current-alpine
      container_name: npm_module
      volumes:
          - ./:/var/www/html
      ports:
          - 5173:5173
      entrypoint: ["npm"]
      working_dir: /var/www/html

Add server block in vite.config.js. server: { host: true }

Just run docker-compose run --rm --service-ports npm run dev

It was fixed by that! Thank you!

Please or to participate in this conversation.