Assets are not served when running "sail npm run dev" without an existing build folder after migrating from Mix to Vite on Laravel using Sail
See original GitHub issueI migrated from Mix 6.0.6 to Vite 3.0.9 (laravel-vite-plugin 0.5.4) on Laravel 9.2.5.1.
I followed these instructions: https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-laravel-mix-to-vite
The assets resources/css/app.css
and resources/js/app.js
are not served when i start hot-reloading on Sail via sail npm run dev
(= vite
) , if i did not build them before via sail npm run build
(= vite build
) and the ./public/build/**
files exist.
If the compiled assets in ./public/build/**
do NOT exist, then @vite(['resources/css/app.css', 'resources/js/app.js'])
in my blade-template does not touch the defined links - they are referenced like that in the web-browser, and therefore won’t be served.
If the compiled assets in ./public/build/**
DO exist, then @vite(['resources/css/app.css', 'resources/js/app.js'])
in my blade-template is converted to the related compiled assets, e.g. build/assets/app.3696ec54.css
or build/assets/app.dfc18a0d.js
.
Shouldn’t hot-reloading started with sail npm run dev
(= vite
) also create the build-directories and files on related file-changes?
And is it possible to change the build target directory like we can do it with Mix?
My package.json
scripts section:
"scripts": {
"dev": "vite",
"build": "vite build"
}
My vite.config.js
:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
server: {
host: 'server.apps.local'
},
plugins: [
laravel({
input: [
'resources/css/app.css',
'resources/js/app.js',
],
refresh: true
}),
vue({
template: {
transformAssetUrls: {
base: null,
includeAbsolute: false,
},
},
}),
]
});
My postcss.config.js
:
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
My docker-compose.yml
:
# For more information: https://laravel.com/docs/sail
version: "3"
x-tz: &tz
TZ: Europe/Berlin
services:
laravel.test:
build:
context: ./vendor/laravel/sail/runtimes/8.1
dockerfile: Dockerfile
args:
WWWGROUP: '${WWWGROUP}'
image: sail-8.1/app
extra_hosts:
- 'host.docker.internal:host-gateway'
ports:
- '${APP_PORT:-80}:80'
- '${VITE_PORT:-5173}:${VITE_PORT:-5173}'
environment:
<<: *tz
WWWUSER: '${WWWUSER}'
LARAVEL_SAIL: 1
XDEBUG_MODE: '${SAIL_XDEBUG_MODE:-off}'
XDEBUG_CONFIG: '${SAIL_XDEBUG_CONFIG:-client_host=host.docker.internal}'
volumes:
- '.:/var/www/html'
networks:
- sail
depends_on:
- mysql
- redis
- meilisearch
- selenium
mysql:
image: 'mysql/mysql-server:8.0'
ports:
- '${FORWARD_DB_PORT:-3307}:3307'
environment:
<<: *tz
MYSQL_TCP_PORT: '${DB_PORT}'
MYSQL_ROOT_PASSWORD: '${DB_PASSWORD}'
MYSQL_ROOT_HOST: "%"
MYSQL_DATABASE: '${DB_DATABASE}'
MYSQL_USER: '${DB_USERNAME}'
MYSQL_PASSWORD: '${DB_PASSWORD}'
MYSQL_ALLOW_EMPTY_PASSWORD: 1
volumes:
- 'sail-mysql:/var/lib/mysql'
networks:
- sail
healthcheck:
test: ["CMD", "mysqladmin", "ping", "-p${DB_PASSWORD}"]
retries: 3
timeout: 5s
redis:
image: "redis:alpine"
ports:
- "${FORWARD_REDIS_PORT:-6379}:6379"
environment:
<<: *tz
volumes:
- 'sail-redis:/data'
networks:
- sail
healthcheck:
test: ["CMD", "redis-cli", "ping"]
retries: 3
timeout: 5s
meilisearch:
image: 'getmeili/meilisearch:latest'
ports:
- '${FORWARD_MEILISEARCH_PORT:-7700}:7700'
environment:
<<: *tz
volumes:
- 'sail-meilisearch:/data.ms'
networks:
- sail
healthcheck:
test: ["CMD", "wget", "--no-verbose", "--spider", "http://localhost:7700/health"]
retries: 3
timeout: 5s
mailhog:
image: 'mailhog/mailhog:latest'
environment:
<<: *tz
ports:
- '${FORWARD_MAILHOG_PORT:-1025}:1025'
- '${FORWARD_MAILHOG_DASHBOARD_PORT:-8025}:8025'
networks:
- sail
selenium:
image: 'selenium/standalone-chrome'
environment:
<<: *tz
volumes:
- '/dev/shm:/dev/shm'
networks:
- sail
networks:
sail:
driver: bridge
volumes:
sail-mysql:
driver: local
sail-redis:
driver: local
sail-meilisearch:
driver: local
Issue Analytics
- State:
- Created a year ago
- Comments:21 (7 by maintainers)
I’m using Sail withi Laravel UI.
Just adding this solving my problem:
If
server.apps.local
resolves to127.0.0.1
then by specifying it forserver.host
you’re telling Vite to only listen on the localhost of the container (which is not the localhost of your host machine) which would make Vite inaccessible outside of the container.If running Vite inside Sail’s main container, then you should be able to remove
server.host
from your config and remove the--host
flag because we automatically configure it for you. If you’re using a different Docker setup, then you should either setserver.host
totrue
or use the--host
option.