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.