DEV Community

Tom
Tom

Posted on • Edited on

1

[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?

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

DEV (this website) is a community where over one million developers have signed up to keep up with what's new in software.

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

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay