DEV Community

Tom
Tom

Posted on • Updated on

[SOLVED]Yet another docker + vite, The connection was reset

Alright, I am at my wit's end here. I am trying to run vite inside a docker container, that's it. Together with the Laravel plugin 'laravel-vite-plugin'. In a php:8.1-apache container. But it won't load. The console screams
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5173/@vite/client. (Reason: CORS request did not succeed). Status code: (null).
When I try to visit http://localhost:5173/@vite/client, the browser tells me, "The connection was reset.". Not sure how else debug this through.

I run a standard php:8.1-apache Dockerfile with docker-compose build and docker-compose up. All I added are some lines in the Dockerfile to install node. Then I expose the ports 80:80 and 5173:5137 in docker-compose.yml. I configure vite like this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js'],
            refresh: true
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false
                }
            }
        })
    ],
    server: {
        host: '0.0.0.0',
        port: 5173,
        hmr: {
            port: 5173,
            clientPort: 5173,
            host: 'localhost'
        }
    }
});
Enter fullscreen mode Exit fullscreen mode

And then I simply run npx vite inside the php:8.1-apache container. I tried everything I could think of but I cannot get this to work! Is it possible that apache blocks this somehow?

Top comments (1)

Collapse
 
tomelsj profile image
Tom

I got it working by setting host: true, remove ports from the hmr section, adding

watch: {
usePolling: true
},

and change the port to 8000