Me ha ocurrido que al tener levantado Laravel 10 a través de Docker usando Traefik me mostraba la página por defecto de la instalación de Laravel pero al instalar Laravel breeze y correr npm run dev, no me muestra los enlaces correctamente del js y css.
Cuando vamos a la url que hemos configurado nos muestra la página por defecto
Pero si vamos a login (aunque tengamos corriendo npm run dev) nos mostrará la página sin estilos ni js
Para solucionarlo vamos a ir paso a paso, para ello voy a agregar como tengo configurado mi docker-compose
version: "3.9"
services:
nginx_l10v2:
image: nginx:1.23.0-alpine
restart: unless-stopped
container_name: nginx_l10v2
labels:
- "traefik.enable=true"
- "traefik.http.routers.nginx_l10v2.rule=Host(`laravel.local`)"
- "traefik.http.routers.nginx_l10v2.entrypoints=web"
volumes:
- ./docker/nginx.conf:/etc/nginx/nginx.conf
- ./docker/conf.d/:/etc/nginx/conf.d/
- .:/var/www
depends_on:
- php_l10v2
php_l10v2:
image: ssheduard/php:8.1.17-fpm-alpine
restart: unless-stopped
container_name: php_l10v2
volumes:
- .:/var/www
- ./docker/php/local.ini:/usr/local/etc/php/conf.d/local.ini
db_l10v2:
image: mysql:8.0
restart: unless-stopped
container_name: db_l10v2
tty: true
ports:
- "33101:3306"
environment:
MYSQL_DATABASE: ${DB_DATABASE}
MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
MYSQL_PASSWORD: ${DB_PASSWORD}
MYSQL_USER: ${DB_USERNAME}
TZ: Europe/Madrid
volumes:
- dbdata:/var/lib/mysql/
- ./docker/mysql/my.cnf:/etc/mysql/my.cnf
node_l10v2:
image: node:18-alpine
restart: unless-stopped
container_name: node_l10v2
ports:
- "30201:30201"
working_dir: /var/www
tty: true
volumes:
- .:/var/www
# Docker Networks
networks:
default:
name: ${NETWORK}
external: true
# Volumes
volumes:
dbdata:
driver: local
La parte que nos interesa es la node, si podemos ver estamos declarando el puerto 30201 como ejemplo.
Ahora vamos a editar el archivo vite.config.js, vamos a agregar la parte de server.
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',
port: 30201,
hmr: {
host: 'laravel.local'
},
},
});
Debemos configurar el host a 0.0.0.0, port 30201 (la que pusimos en el docker-compose) y hmr -> host la url que hemos configurado en traefik, para este ejemplo es laravel.local
La terminal mostrará esta información cuando ejecutamos el comando npm run dev
Ahora si refrescamos la página de login ya se mostrará correctamente.
Espero que esta pequeña solución os sirva.
