Rework Vite Hot Module Reloading

By setting a different client port we can make the nginx reverse
proxy work properly. The corresponding GDK was merged here:
https://gitlab.com/gitlab-org/gitlab-development-kit/-/merge_requests/3501

We also now start vite on the correct host and we load the
settings directly from `config/vite.gdk.json`.




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.

app/controllers/base_action_controller.rb

@@ -26,9 +26,8 @@ class BaseActionController < ActionController::Base
     next if p.directives.blank?
 
     if helpers.vite_enabled?
-      vite_host = ViteRuby.instance.config.host
       vite_port = ViteRuby.instance.config.port
-      vite_origin = "#{vite_host}:#{vite_port}"
+      vite_origin = "#{Gitlab.config.gitlab.host}:#{vite_port}"
       http_origin = "http://#{vite_origin}"
       ws_origin = "ws://#{vite_origin}"
       wss_origin = "wss://#{vite_origin}"

lib/vite_gdk.rb

@@ -15,6 +15,7 @@ def self.load_gdk_vite_config
     return unless enabled
 
     ViteRuby.configure(
+      host: config.fetch('host', 'localhost'),
       port: Integer(config.fetch('port', 3038))
     )
   end

spec/lib/vite_gdk_spec.rb

@@ -24,8 +24,8 @@
           end.and_return(true)
           expect(YAML).to receive(:safe_load_file) do |file_path|
             expect(file_path).to end_with(VITE_GDK_CONFIG_FILEPATH)
-          end.and_return('enabled' => true, 'port' => 3038)
-          expect(ViteRuby).to receive(:configure).with(port: 3038)
+          end.and_return('enabled' => true, 'port' => 3038, 'host' => 'gdk.test')
+          expect(ViteRuby).to receive(:configure).with(host: 'gdk.test', port: 3038)
           expect(ViteRuby.env).to receive(:[]=).with('VITE_ENABLED', 'true')
 
           described_class.load_gdk_vite_config

vite.config.js

-import path from 'path';
+import { readFileSync } from 'node:fs';
+import path from 'node:path';
+
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue2';
 import graphql from '@rollup/plugin-graphql';
@@ -12,7 +14,15 @@ import {
   SOURCEGRAPH_PUBLIC_PATH,
   GITLAB_WEB_IDE_PUBLIC_PATH,
 } from './config/webpack.constants';
-import viteSharedConfig from './config/vite.json';
+
+let viteGDKConfig;
+try {
+  viteGDKConfig = JSON.parse(
+    readFileSync(path.resolve(__dirname, 'config/vite.gdk.json'), 'utf-8'),
+  );
+} catch {
+  viteGDKConfig = {};
+}
 
 const aliasArr = Object.entries(webpackConfig.resolve.alias).map(([find, replacement]) => ({
   find: find.includes('$') ? new RegExp(find) : find,
@@ -94,8 +104,7 @@ export default defineConfig({
     ],
   },
   plugins: [
-    // VITE_ENABLED is present when running with GDK
-    process.env.VITE_ENABLED ? autoRestartPlugin : null,
+    viteGDKConfig.enabled ? autoRestartPlugin : null,
     fixedRubyPlugin,
     vue({
       template: {
@@ -122,11 +131,17 @@ export default defineConfig({
     'process.env.GITLAB_WEB_IDE_PUBLIC_PATH': JSON.stringify(GITLAB_WEB_IDE_PUBLIC_PATH),
   },
   server: {
-    hmr: {
-      host: viteSharedConfig?.development?.host || 'localhost',
-      // ensure we stay compatible with HTTPS enabled for GDK
-      protocol: 'ws',
-    },
+    hmr:
+      viteGDKConfig.hmr === undefined
+        ? /*
+        This is a legacy behavior for older GDKs. They will fallback to:
+          ws://localhost:3038/vite-dev/
+        TODO: Remove this after 2024-01-18 */
+          {
+            host: 'localhost',
+            protocol: 'ws',
+          }
+        : viteGDKConfig.hmr,
     https: false,
     watch: {
       ignored: [