Contrib.social

Proxy requests to vite dev server

Open on Drupal.org →
Created on 10 February 2023, almost 2 years ago
Updated 29 August 2023, over 1 year ago

Problem/Motivation

When using the module inside a container based setup, exposing static ports is required to access vite dev server from browser. This starts to be problematic when using multiple vite setups inside one larger project (for example, base theme and its subthemes or decoupled blocks in custom modules) or running multiple projects on a single machine. In such cases, different ports must be exposed in different projects and vite setups, which can be burdensome to manage.
Another problem is with local https setup, drupal site can be configured with working https and require their assets to also be loaded through https with valid cert, but vite dev server by default serves everything through http and enabling https requires additional configuration for each vite setup in the project.

Proposed resolution

Proxy all requests to vite dev server through endpoint exposed on the drupal side, e.g. something like /_vite/{module/theme}/{path}. {module/theme} would be a module/theme id of which asset library element is requested - this would determine to which vite dev server request is passed. {path} would be the requested asset path that will be passed directly to the vite dev server.
This would:

  • remove the requirement of exposing additional unique ports in container based setups,
  • by default use ssl cert configured for drupal site.
✨ Feature request
Status

Active

Version

1.0

Component

Code

Created by

🇵🇱Poland wotnak

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @wotnak
  • Comment over 1 year ago →
    🇫🇷France aridard

    Hello,

    I'm working in a docker environment with multiple projects runing at the same time, with multiple Vite server runing at the same time.
    I think it is not a Drupal module problematic, you need a reverse proxy that will do routing with port binding correctly depending on network rules.

    I implemented https://traefik.io/ in order to expose vite server and port through custom domain names. I do not have the need to bind port on my computer directly anymore, that solves the problem.

  • Comment over 1 year ago →
    🇵🇱Poland wotnak

    Configuring domain solves the problem of binding ports directly, but it is still an additional configuration step that could be skipped by proxying requests to vite dev server. Also, when running multiple vite dev servers simultaneously inside single project (for example in a multisite setup for common base theme and specific site theme or maybe for a theme and a decoupled react based block) you would need to configure multiple domains pointing to different ports.

  • Comment over 1 year ago →
    🇺🇸United States mortona2k Seattle

    I'm using lando. This will set up vite to run inside the container on port 3000 (change the port in vite.config.js). Lando sets up the node.demo.lndo.site proxy to point to the internal vite instance.

    proxy:
  node:
    - node.demo.lndo.site:3000
services:
  node:
    type: node:18
    ssl: true
    sslExpose: false
    port: 3000
    scanner: false
tooling:
  npm:
    service: node
    cmd: npm

    This is all working, but one issue I'm facing is getting unocss devtools to work. I am loading 'virtual:unocss-devtools' in my main.js. The console says the devtools are connected, but throws an error loading https://demo.lndo.site/@unocss-devtools-update, which is the drupal url. Looks like this is the path that requests new styles when classes are changed in the inspector. This path needs to route to the vite instance instead.

    It seems like any extra dependency loaded by a library will run into this issue. I tried using resolve.alias, but that didn't do it. The proposal to proxy requests from Drupal sounds like it would make things easier. Is there any workaround within the vite config?

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024