Dev Stack incompatibility

[D3strukt0r]

vite-plugin-symfony version

7.0.3

vite-bundle version

7.0.3

your OS, node version, Symfony version, PHP version

Debian Docker Container, Node 18.20.4, Symfony 6.4.10, PHP 8.3.10

Description

Hello again. I wanted to let you know that the /_profiler/vite route doesn't work for how we manage projects at work.

the relevant vite.config.js

export default defineConfig(({command}) => ({
  plugins: [
    // ...
    react(),
    symfonyPlugin(),
    viteRestart({
      reload: ['templates/*.twig'],
    }),
  ],
  base: '/build/',
  build: {
    target: browserslistToEsbuild(),
    outDir: './public/build',
    rollupOptions: {
      input: {
        'index': './assets/index.jsx',
      },
      // ...
    },
    manifest: true,
  },
  server: {
    host: '0.0.0.0',
    strictPort: true,
    watch: {
      ignored: ['**/.idea/**', '**/tests/**', '**/var/**', '**/vendor/**'],
    },
    origin: `https://devserver.${process.env.PROJECT_NAME}.test`,
  },
  // ...
}));

to manage all the different projects at work, we have a central Traefik instance on a MacBook. Now we got two containers, one being Nginx and another one being PHP-FPM (& Node.js)

requests for my-project.test:443 go to the nginx container, and the vite dev server is running in the fpm container accessible through devserver.my-project.test:443 (mapped to 5173)

to visualize what is mean, here are what the labels look like:

services:
  nginx:
    # ...
    labels:
      - traefik.http.routers.${COMPOSE_PROJECT_NAME}.rule=Host(`${COMPOSE_PROJECT_NAME}.${TLD}`)
      - traefik.http.routers.${COMPOSE_PROJECT_NAME}.tls=true
      - traefik.http.services.${COMPOSE_PROJECT_NAME}.loadbalancer.server.port=80

  fpm:
    # ...
    labels:
      - traefik.http.routers.${COMPOSE_PROJECT_NAME}-devserver.rule=Host(`devserver.${COMPOSE_PROJECT_NAME}.${TLD}`)
      - traefik.http.services.${COMPOSE_PROJECT_NAME}-devserver.loadbalancer.server.port=5173
      - traefik.http.routers.${COMPOSE_PROJECT_NAME}-devserver.tls=true

this allows us to have multiple projects running at the same time and basically vite dev server also runs. but because what is set in server.origin your library seems to think it can talk to vite with the same address (both being in the same container, php & vite), but that's not the case, because it would have to be http://localhost:5173 instead (or another hostname if vite was running on a different service). What I'm saying is this should be configurable separately.

Crafts Vite Plugin (https://nystudio107.com/docs/vite/) solves this by providing a devServerInternal which for other projects we have set to http://localhost:5173 and devServerPublic to https://devserver.my-project.test

How to reproduce

everything is in the description :)

Possible Solution

Allow configuring something like devServerInternal

[lhapaipai]

hi @D3strukt0r , have you tried the proxy_origin option for the vite-bundle ? documentation it seems that this can solve your issue. source code

[D3strukt0r]

Alright, had to update to 7.0.4 and then it worked, I guess you got idea the same moment i came to the issue :P

Thanks again :)

[lhapaipai]

the credit goes to @andyexeter : pr the name proxy_origin was originally used because the backend was supposed to proxy internal requests to the vite server. it seems to me that it is now unsuitable for the use case here. what do you think?