I have been trying to make Vite work along with Docker and Laravel, but this has been difficult. I can't get Vite's HMR to work (nor for .js or .css, nor for .blade) and everytime I change a css or js file, none of them will recompile, althought .blade does recompiles (but as stated, won't be replaced on the browser).
My application is fresh, meaning I just created it using laravel new [name of project]. For the Docker contianer I added some files for configuring it. The files are listed below.
docker-compose.yml
version: "3.3"
services:
vitest:
build:
context: .
dockerfile: ./devops/Dockerfile.local
ports:
- 80:8000
- 5173:5173
volumes:
- ./:/var/www/html
networks:
- vitest
tty: true
container_name: vitest
mysql_vitest:
image: mariadb:10.3
entrypoint: docker-entrypoint.sh --sql-mode='STRICT_TRANS_TABLES,STRICT_ALL_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,TRADITIONAL,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION'
ports:
- 3306:3306
networks:
- vitest
environment:
- MYSQL_ROOT_PASSWORD=123456
- MYSQL_USER=user
- MYSQL_PASSWORD=123456
- MYSQL_DATABASE=vitest
container_name: mysql_vitest
phpmyadmin_vitest:
image: phpmyadmin/phpmyadmin
ports:
- 8181:80
networks:
- vitest
environment:
PMA_HOST: mysql_vitest
UPLOAD_LIMIT: 300M
container_name: phpmyadmin_vitest
networks:
vitest:
external:
name: vitest_network
devops/Dockerfile.local
FROM webdevops/php-apache-dev:8.1
COPY ./devops/apache/localhost.conf /etc/apache2/sites-available/localhost.conf
WORKDIR /var/www/html
RUN a2dissite 000-default.conf \
&& a2ensite localhost.conf \
&& service apache2 restart
RUN apt-get update && apt-get install -y gnupg2 && apt-get install -y curl \
&& curl -sL https://deb.nodesource.com/setup_16.x | bash - \
&& apt-get install -y nodejs \
&& docker-php-ext-install pdo pdo_mysql \
&& docker-php-ext-install mysqli \
&& npm i -g npm
COPY ./devops/supervisor/phpserve.conf /opt/docker/etc/supervisor.d/phpserve.conf
COPY ./devops/supervisor/vuestart.conf /opt/docker/etc/supervisor.d/vuestart.conf
devops/supervisor/phpserve.conf
[program:phpserve]
command = php artisan serve --host 0.0.0.0
directory = /var/www/html/
startsecs = 0
autostart = true
autorestart = false
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0
devops/supervisor/vuestart.conf
[program:vue]
command = npm run dev
directory = /var/www/html/
startsecs = 0
autostart = true
autorestart = false
stdout_logfile=/dev/stdout
stdout_logfile_maxbytes=0
stderr_logfile=/dev/stderr
stderr_logfile_maxbytes=0
devops/apache/localhost.conf
<VirtualHost *:80>
DirectoryIndex index.php index.html
ServerName localhost
DocumentRoot /var/www/html
RewriteEngine On
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]
# If the requested resource doesn't exist, use index.html
RewriteRule ^ /dev-index.php
</VirtualHost>
<Directory /var/www/html>
Options Indexes FollowSymLinks MultiViews
AllowOverride All
Require all granted
</Directory>
vite.config.js
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: true,
}),
],
server: {
host: '0.0.0.0',
hmr: {
host: 'localhost'
},
},
});