feat(backend): add a frontendDevServer config setting

conf/defaults.ini

@@ -89,6 +89,9 @@ cdn_url =
 # `0` means there is no timeout for reading the request.
 read_timeout = 0
 
+# Tell the backend server where to load frontend assets from when developing Grafana.
+frontend_dev_server =
+
 # This setting enables you to specify additional headers that the server adds to HTTP(S) responses.
 [server.custom_response_headers]
 #exampleHeader1 = exampleValue1

conf/sample.ini

@@ -92,6 +92,9 @@
 # `0` means there is no timeout for reading the request.
 ;read_timeout = 0
 
+# Tell the backend server where to load frontend assets from when developing Grafana.
+;frontend_dev_server =
+
 # This setting enables you to specify additional headers that the server adds to HTTP(S) responses.
 [server.custom_response_headers]
 #exampleHeader1 = exampleValue1

pkg/api/dtos/index.go

@@ -23,6 +23,7 @@ type IndexViewData struct {
 	NewGrafanaVersion                   string
 	AppName                             string
 	AppNameBodyClass                    string
+	FrontendDevServer                   string
 	FavIcon                             template.URL
 	AppleTouchIcon                      template.URL
 	AppTitle                            string

pkg/api/index.go

@@ -120,6 +120,7 @@ func (hs *HTTPServer) setIndexViewData(c *contextmodel.ReqContext) (*dtos.IndexV
 		ThemeType:                           theme.Type,
 		AppUrl:                              appURL,
 		AppSubUrl:                           appSubURL,
+		FrontendDevServer:                   hs.Cfg.FrontendDevServer,
 		NewsFeedEnabled:                     hs.Cfg.NewsFeedEnabled,
 		GoogleAnalyticsId:                   settings.GoogleAnalyticsId,
 		GoogleAnalytics4Id:                  settings.GoogleAnalytics4Id,

pkg/api/webassets/webassets.go

@@ -43,23 +43,23 @@ func GetWebAssets(ctx context.Context, cfg *setting.Cfg, license licensing.Licen
 	ret := entryPointAssetsCache
 	entryPointAssetsCacheMu.RUnlock()
 
-	if cfg.Env == setting.Dev {
+	if cfg.Env == setting.Dev && cfg.FrontendDevServer != "" {
 		// TODO: Hardcoded right now just to get vite dev env working.
 		// see https://vitejs.dev/guide/backend-integration.html
 		// Not sure we can rely on env config === dev alone as it's used in prod envs.
 		viteDev := &dtos.EntryPointAssets{
 			JSFiles: []dtos.EntryPointAsset{
 				{
-					FilePath:  "http://localhost:5173/@vite/client",
+					FilePath:  fmt.Sprintf("%s/@vite/client", cfg.FrontendDevServer),
 					Integrity: "",
 				},
 				{
-					FilePath:  "http://localhost:5173/app/index.ts",
+					FilePath:  fmt.Sprintf("%s/app/index.ts", cfg.FrontendDevServer),
 					Integrity: "",
 				},
 			},
-			Dark:  "http://localhost:5173/sass/grafana.dark.scss",
-			Light: "http://localhost:5173/sass/grafana.light.scss",
+			Dark:  fmt.Sprintf("%s/sass/grafana.dark.scss", cfg.FrontendDevServer),
+			Light: fmt.Sprintf("%s/sass/grafana.light.scss", cfg.FrontendDevServer),
 		}
 
 		return viteDev, nil

pkg/setting/setting.go

@@ -1886,6 +1886,8 @@ func (cfg *Cfg) readServerSettings(iniFile *ini.File) error {
 		return fmt.Errorf("TLS version not configured correctly:%v, allowed values are TLS1.2 and TLS1.3", cfg.MinTLSVersion)
 	}
 
+	// TODO: sanitize this for trailing slashes
+	cfg.FrontendDevServer = valueAsString(server, "frontend_dev_server", "")
 	cfg.Domain = valueAsString(server, "domain", "localhost")
 	cfg.HTTPAddr = valueAsString(server, "http_addr", DefaultHTTPAddr)
 	cfg.HTTPPort = valueAsString(server, "http_port", "3000")

public/views/index.html

@@ -355,10 +355,10 @@
     <!-- End Google Tag Manager -->
     [[end]]
 
-    <!-- see pkg/api/webassets/webassets.go L50 -->
-    [[ if .IsDevelopmentEnv ]]
-    <script type="module">
-      import RefreshRuntime from 'http://localhost:5173/@react-refresh';
+    <!-- see pkg/api/webassets/webassets.go -->
+    [[ if and .IsDevelopmentEnv .FrontendDevServer ]]
+    <script nonce="[[$.Nonce]]" type="module">
+      import RefreshRuntime from '[[ .FrontendDevServer ]]/@react-refresh';
       RefreshRuntime.injectIntoGlobalHook(window);
       window.$RefreshReg$ = () => {};
       window.$RefreshSig$ = () => (type) => type;