Access Vite server from DDEV server

[samlinck]

I guess I need to tweak the kirbyup config file to get it to work with DDEV, but I have no idea how.

[jonaskuske]

You can try adding a .ddev/docker-compose.kirbyup.yaml to your project:

services:
  web:
    ports:
      - "5177:5177"

[samlinck]

@jonaskuske This changes the connection refused error to a connection reset error:

[jonaskuske]

Hmm, progress, I guess? 😅

This is hard to debug without more info about your setup, or more optimally, a repro.

One more thing you can try is adding this kirbyup.config.js to your plugin project: (but keep the docker-compose.kirbyup.yaml!)

import { defineConfig } from 'kirbyup/config'

export default defineConfig({
  vite: {
    server: {
      host: '0.0.0.0'
    }
  }
})

[samlinck]

@jonaskuske we have another plugin were we use vite without kirbyup and there we use a docker-compose.vite.yml, like in this article: https://medium.com/@mtillmann_68557/using-laravel-9-breeze-with-ddev-and-vite-3e40abd2954a

If we run ddev yarn vite --host Then it will start watching.

But with kirbyup we don't have the possibility to pass --host as an argument.

[jonaskuske]

Thanks for the additional info! Have you tried the kirbyup.config.js in my previous reply yet? It should do the same as --host.

The docker-compose.yaml maps the :5177 port from the host machine into the container, so that Vite/kirbyup can connect to :5177 from the browser (which runs outside the container), and reach its server that's running within the container. But the container has multiple network interfaces: Docker maps :5177 to the interface meant for external connections, but by default Vite only listens on the local interface. By using --host or --host 0.0.0.0 you instruct Vite to listen on all interfaces that exist within the container, so now a connection from :5177 outside the container to the Vite server can be established. The Vite config in kirbyup.config.js does the same as --host 0.0.0.0, so it should work once you add that.

[samlinck]

Thank you for the clear explanation. I think we are almost there. In our setup we have https enabled and it seems that this connection isn't secure.

[jonaskuske]

Ah, I see. That complicates things quite a bit. Enabling https for Vite should work, but kirbyup doesn't support it as of now (definitely a bug to be fixed, independent from the outcome here) and you'll have to generate and register a cert etc. Maybe proxying through the existing ddev domain on another port is the easier solution then. I'm a bit busy right now, but can look into it in the coming days. Can you disable https in local dev for now?

[samlinck]

Yeah no problem! I'm already really grateful for your quick and helpful answers.

[samlinck]

Hi @jonaskuske, I was wondering if you've had a chance to address the issue yet?

[jonaskuske]

Nope, but I finally have more time this week. Might get to it this evening, definitely sometime in the next days :)

[jonaskuske]

@samlinck I think I need a repro. How do you run the kirbyup process within ddev/Docker?

I just created a new DDEV Kirby site, which after running ddev start is correctly served with https at https://test.ddev.site. Next I ran kirbyup serve src/index.js in site/plugins/my-plugin – this started the kirbyup dev server on :5177, not in Docker but directly on my machine. When I visit /panel, Kirby loads the plugin file from http://127.0.0.1:5177/src/index.js. This mixes https and http (the mixed content error seen in your screenshot) but works, since https://test.ddev.site maps to 127.0.0.1 and browsers do actually allow mixed content for sites served locally, even if they're using https and a domain name. So all fine in my testing, couldn't reproduce. This raises two questions:

1. How are you running the kirbyup process within the DDEV container? (which made --host necessary)
2. Why is mixed content blocked for you? Are you using Safari? Is your site not running locally but on a server with a "real" IP?

[samlinck]

@jonaskuske I followed your instructions, and now it works. The problem was that i wanted to run it with DDEV I think. Thanks for all your time.