Krompi's avatar

Vite behind traefik proxy

Hello, I'm using docker to run and develop my laravael applications in a php-container, besides a nginx- and a mysql-container. Andrew Schmelyun explained a similar setup in this video: https://www.youtube.com/watch?v=mZbLvGQqEvY That works like a charm and local development is also working as long as I used webpack. But now I'm struggling in using vite. Does anyone has an idea how I can use vite behind traefik in a local environment?

Thanks Matthias

0 likes
5 replies
LaryAI's avatar
LaryAI
AI
2 years ago
Level 58

To use Vite behind Traefik in a local environment, you need to configure Traefik to forward requests to the Vite server. Here's an example configuration for Traefik:

http:
  routers:
    vite:
      rule: "Host(`vite.local`)"
      service: vite
  services:
    vite:
      loadBalancer:
        servers:
          - url: "http://vite:3000"

This configuration sets up a router that forwards requests to the Vite server running on port 3000. You can customize the router rule to match your local domain name.

Make sure to update your hosts file to point the domain name to your local IP address:

127.0.0.1 vite.local

With this configuration, you should be able to access your Vite server at http://vite.local and Traefik will handle the routing.

Krompi's avatar

Thank you for your hint.

my first approach was this in the docker-compose.yml:

        - "traefik.enable=true"
        - "traefik.docker.network=proxy"   
        - "traefik.http.routers.krompi-app-vite.entrypoints=http"
        - "traefik.http.routers.krompi-app-vite.rule=hostregexp(`krompi-app-vite.{domain:.+}`)"
        - "traefik.http.services.krompi-app-vite.loadbalancer.server.port=5173"

When I call http://krompi-app-vite.localhost I get "Bad Gateway"...

As far as I can see, i can't translate your hint in compose-labels: https://github.com/traefik/traefik/issues/8753

Krompi's avatar

I've just realized that I discussed with he AI bot... šŸ˜‚

1 like
cmora's avatar

After trying quite a few things, this configuration has worked for me:

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    server: {
        host: '0.0.0.0',
        hmr: {
            host: 'localhost'
        }
    },
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

In my laravel container

ports:
          - "5173:5173"

For Trafik you don't have to do anything extra beyond the initial configuration to link your container.

Please or to participate in this conversation.