question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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 issue

I 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:closed
  • Created a year ago
  • Comments:21 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
Geovanekcommented, Oct 19, 2022

I’m using Sail withi Laravel UI.

Just adding this solving my problem:

server: {
        hmr: {
            host: 'localhost'
        }
    },
2reactions
jessarchercommented, Sep 21, 2022

If server.apps.local resolves to 127.0.0.1 then by specifying it for server.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 set server.host to true or use the --host option.

Read more comments on GitHub >

github_iconTop Results From Across the Web

I can't run 'npm run dev' since Laravel updated with Vite
I installed new laravel project, installed Laravel JetStream with SSR and teams support hit the 'npm install command'. Every time I run npm...
Read more >
New Sail + Vite Project `sail npm run dev` Does Not Compile ...
Problem: New Laravel Sail + Vite project compiles assets when executing terminal command sail npm run build , but does not compile assets...
Read more >
Asset Bundling (Vite) - The PHP Framework For Web Artisans
Have you started a new Laravel application using our Vite scaffolding but need to move back to Laravel Mix and webpack? No problem....
Read more >
How to Migrate from Laravel Mix to Vite | by Balaji Dharma
The development server will run inside the container. To install dependencies, use sail npm ci . Then sail run dev to start the...
Read more >
Test and deploy Laravel applications with GitLab CI/CD and ...
Since we have our app up and running locally, it's time to push the codebase to our remote repository. Let's create a new...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found