Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

michalis's avatar

Laravel sail + vite howto?

Hey guys, Im trying to use vite with laravel using the innocenzi/laravel-vite package

Im having trouble getting it to work, are there any howto guides out there?

when I run yarn dev or npm run dev, it seems that the spun up server is having trouble serving the assets, it keeps giving me an ERR_CONNECTION_REFUSED error in the console

the weird thing is that a couple of times it managed to work, but most of the time it doesnt

0 likes
17 replies
Sinnbeck's avatar

I dont use sail, but rather a custom built docker setup. But I got mine working by running vite from inside docker

https://laravel.com/docs/8.x/sail#executing-node-npm-commands

Remember to open the port in you docker-compose.yml file (I have set mine to run on 3009 in vite.config.js)

ports:
            - 3009:3009

Note that I have a helper method that checks if the dev server is running to ensure that the correct handler is used. I used this tutorial: https://sebastiandedeyne.com/vite-with-laravel/

2 likes
Sinnbeck's avatar

Note: If you are just always checking for the dev server, then the above should not be necessary

1 like
michalis's avatar

@sinnbeck I appreciate the reply, I am quite new at using docker and npm, so while I understand what you want me to do, I am not 100% sure about the syntax, would it be too much to ask you to post your docker-compose.yml and your vite.config.js files?

Sinnbeck's avatar
Sinnbeck
4 years ago
Best Answer
Level 102

@michalis

vite.config.js

const path = require('path');
import reactRefresh from '@vitejs/plugin-react-refresh';

export default ({ command }) => ({
    base: command === 'serve' ? '' : '/build/',
    publicDir: 'fake_dir_so_nothing_gets_copied',
    server: {
        port: 3009
    },
    build: {
        manifest: true,
        outDir: 'public/build',
        rollupOptions: {
            input: 'resources/js/app.jsx',
        },
        sourcemap: true
    },
    resolve: {
        alias: [
            {find: "@", replacement: path.resolve(__dirname, 'resources/js')}
        ],
    },
    define: {
        global: 'window'
    },
    plugins: [reactRefresh()]
});

docker-compose.yml (relevant part)

services:
    php:
        build: ./php
        image: php:7.4
        volumes:
            - ../:/app
        ports:
            - 3009:3009
        restart: always
        extra_hosts:
            - "host.docker.internal:host-gateway"
1 like
michalis's avatar

I apologize but I cant get it to work, still getting ERR_CONNECTION_REFUSED when trying to fetch the assets, even though It runs the dev server on the new port (3009)

all I did was add the port, note sure if there is a setting I am missing

// docker-compose.yml
services:
    laravel.test:
        build:
            context: ./vendor/laravel/sail/runtimes/8.0
            dockerfile: Dockerfile
            args:
                WWWGROUP: '${WWWGROUP}'
        image: sail-8.0/app
        extra_hosts:
            - 'host.docker.internal:host-gateway'
        ports:
            - '${APP_PORT:-80}:80'
            - '3009:3009'
        environment:
            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:
            - mariadb

// vite.config.ts
import { defineConfig } from "laravel-vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig()
	.withPlugin(vue)
    .merge({
        // Your own Vite options
        server: {
            port: 3009
        }
    })
Sinnbeck's avatar

@michalis Can you show the code in your blade file?

Something like this

<script type="module" src="http://localhost:3009/@vite/client"></script>
<script type="module" src="http://localhost:3009/resources/js/app.jsx"></script>
1 like
michalis's avatar

@Sinnbeck

<script type="module" src="http://localhost:3000/resources/scripts/main.ts"></script>
<script type="module" src="http://localhost:3000/resources/scripts/some-script.js"></script>
Sinnbeck's avatar

@michalis Ok so it is using 3000 instead of 3009. Change the port to that in both docker and the vite config, and try again. And you can easily just open the url directly to check if its working

michalis's avatar

@Sinnbeck in docker, do I create a new service for the vite port? or do I add the port to my sail/php service?

Sinnbeck's avatar

@michalis Just add it to the service running npm already. My guess would be that its the php one

But maybe first try and just run vite locally and see if you can open it in a browser tab like I talked about earlier.

michalis's avatar

@Sinnbeck I managed to make it work, I cant thank you enough, I appreciate you taking the time to help

Namsir's avatar

@michalis hi, are you able to share some insights of how you'd got it working? I still have no success.

ecanquiz's avatar

@michalis After searching all over the web, I saw the light with this. It was neither Vite nor Docker's problem. Thank you very much little brother.

Please or to participate in this conversation.