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
![](https://ubublog.com/wp-content/uploads/2023/07/image-1024x630.png)
Pero si vamos a login (aunque tengamos corriendo npm run dev) nos mostrará la página sin estilos ni js
![](https://ubublog.com/wp-content/uploads/2023/07/image-1-1024x577.png)
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
![](https://ubublog.com/wp-content/uploads/2023/07/image-2.png)
Ahora si refrescamos la página de login ya se mostrará correctamente.
![](https://ubublog.com/wp-content/uploads/2023/07/image-3.png)
Espero que esta pequeña solución os sirva.