Load vite GDK settings directly
What does this MR do and why?
Load vite GDK settings directly
This is easier than loading it via the environment. We are not requiring
the JSON with an import
because loading it via readFile is a little
more future proof for ESM.
Rework Vite Hot Module Reloading
By setting a different client port we can make the nginx reverse proxy work properly. The following will happen depending on your GDK settings:
Default GDK, no nginx (or, "no GDK") Vite will directly call itself via ws://localhost:3038/vite-dev/
Default GDK, nginx - no https: Vite will be proxied via ws://localhost:3000/vite-dev/
Default GDK, nginx - https: Vite will be proxied via wss://localhost:3443/vite-dev/
We also preserve the legacy behavior defaulting to ws://localhost:3038/vite-dev/
Move more logic to the gdk and use host from settings
There is no other way, because falling back to localhost is not enogh in case you do run your GDK e.g. in a tailscale network.
Screenshots or screen recordings
What | GitLab URL | Websocket URL | Video |
---|---|---|---|
Vanilla GDK | http://127.0.0.1:3000 |
ws://127.0.0.1:3038/vite-dev/ |
gdk-vanilla |
GDK with custom hostname and port | http://gdk.test:3312 |
ws://gdk.test:3038/vite-dev/ |
gdk-hostname-port |
GDK with nginx reverse proxy | http://gdk.test:3312 |
ws://gdk.test:3312/vite-dev/ |
gdk-nginx-http |
GDK with nginx reverse proxy and HTTPS | https://gdk.test:3443 |
wss://gdk.test:3443/vite-dev/ |
gdk-nginx-https |
The relevant configs can be found below here
# Vanilla GDK
vite:
enabled: true
webpack:
enabled: false
---
# GDK with custom hostname and port
hostname: gdk.test
listen_address: 172.16.123.1
port: 3312
vite:
enabled: true
webpack:
enabled: false
---
# GDK with nginx reverse proxy
hostname: gdk.test
listen_address: 172.16.123.1
nginx:
enabled: false
port: 3312
vite:
enabled: true
webpack:
enabled: false
---
# GDK with nginx reverse proxy and HTTPS
hostname: gdk.test
https:
enabled: true
listen_address: 172.16.123.1
nginx:
enabled: true
ssl:
certificate: gdk.test.pem
key: gdk.test-key.pem
port: 3443
vite:
enabled: true
port: 1212
webpack:
enabled: false
How to set up and validate locally
- Check out the
leipert-rework-vite-hmr
branch BOTH in GDK and the gitlab project -
gdk reconfigure
=>gdk restart vite
(andgdk restart nginx
if you use nginx) - Hot module reloading should now work
MR acceptance checklist
This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.
-
I have evaluated the MR acceptance checklist for this MR.