From e894b19c1a7788e17c53875c80c91dbefc5c2179 Mon Sep 17 00:00:00 2001
From: Jack Westbrook <jack.westbrook@gmail.com>
Date: Fri, 25 Oct 2024 13:45:44 +0200
Subject: [PATCH] Build: Fix failing CSS asset paths (#95380)

* build(webpack): set publicpath and process urls to resolve assets correctly

* build(webpack): add back --progress to build

* Add local cdn

(cherry picked from commit 7a19523fa476fd5ff2d7669d116f5be462b100f5)

* chore(devenv): fix local_cdn path in ngnix conf

* chore(codeowners): add frontend-ops as owners of local_cdn docker block

---------

Co-authored-by: Andreas Christou <andreas.christou@grafana.com>
---
 .github/CODEOWNERS                   |  1 +
 devenv/local_cdn/default.conf        | 24 ++++++++++++++++++++++++
 devenv/local_cdn/docker-compose.yaml | 11 +++++++++++
 package.json                         |  2 +-
 scripts/webpack/sass.rule.js         |  7 ++++++-
 scripts/webpack/webpack.dev.js       |  2 +-
 scripts/webpack/webpack.prod.js      |  2 +-
 7 files changed, 45 insertions(+), 4 deletions(-)
 create mode 100644 devenv/local_cdn/default.conf
 create mode 100644 devenv/local_cdn/docker-compose.yaml

diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 26da030814c..da8bee6760f 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -241,6 +241,7 @@
 /devenv/docker/loadtest/ @grafana/grafana-backend-services-squad
 /devenv/docker/rpmtest/ @grafana/grafana-backend-services-squad
 /devenv/jsonnet/ @grafana/dataviz-squad
+/devenv/local_cdn/ @grafana/frontend-ops
 /devenv/local-npm/ @grafana/frontend-ops
 /devenv/setup.sh @grafana/grafana-backend-services-squad
 /devenv/plugins.yaml @grafana/plugins-platform-frontend
diff --git a/devenv/local_cdn/default.conf b/devenv/local_cdn/default.conf
new file mode 100644
index 00000000000..e35c16ee146
--- /dev/null
+++ b/devenv/local_cdn/default.conf
@@ -0,0 +1,24 @@
+server {
+	root /data;
+	autoindex on;
+
+	location / {
+		if ($request_method = 'OPTIONS') {
+			add_header 'Access-Control-Allow-Origin' '$http_origin' always;
+			add_header 'Access-Control-Allow-Credentials' 'true' always;
+			add_header 'Access-Control-Allow-Headers' '*' always;
+			add_header 'Access-Control-Allow-Methods' '*';
+			# add_header 'Access-Control-Max-Age' 1728000;
+			add_header 'Content-Type' 'text/plain; charset=utf-8';
+			add_header 'Content-Length' 0;
+			return 204;
+		}
+
+		add_header 'Access-Control-Allow-Origin' '$http_origin' always;
+		add_header 'Access-Control-Allow-Methods' '*' always;
+		add_header 'Access-Control-Allow-Headers' '*' always;
+		add_header 'Access-Control-Allow-Credentials' 'true' always;
+
+		rewrite ^/grafana-oss/11.4.0-pre/public(.*)$ $1 last;
+	}
+}
diff --git a/devenv/local_cdn/docker-compose.yaml b/devenv/local_cdn/docker-compose.yaml
new file mode 100644
index 00000000000..93860f897f9
--- /dev/null
+++ b/devenv/local_cdn/docker-compose.yaml
@@ -0,0 +1,11 @@
+version: '2'
+
+services:
+  grafana_local_cdn:
+    image: nginx:alpine
+    container_name: grafana_local_cdn
+    ports:
+      - "8080:80"
+    volumes:
+      - ../../public:/data
+      - ./default.conf:/etc/nginx/conf.d/default.conf
\ No newline at end of file
diff --git a/package.json b/package.json
index 2e036067f4d..5701d5c408e 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   "version": "11.4.0-pre",
   "repository": "github:grafana/grafana",
   "scripts": {
-    "build": "NODE_ENV=production nx exec --verbose -- webpack --config scripts/webpack/webpack.prod.js",
+    "build": "NODE_ENV=production nx exec --verbose -- webpack --config scripts/webpack/webpack.prod.js --progress",
     "build:nominify": "yarn run build -- --env noMinify=1",
     "dev": "NODE_ENV=dev nx exec -- webpack --config scripts/webpack/webpack.dev.js",
     "e2e": "./e2e/start-and-run-suite",
diff --git a/scripts/webpack/sass.rule.js b/scripts/webpack/sass.rule.js
index 6ae475bceab..7843e15749a 100644
--- a/scripts/webpack/sass.rule.js
+++ b/scripts/webpack/sass.rule.js
@@ -7,7 +7,12 @@ module.exports = function (options) {
   return {
     test: /\.(sa|sc|c)ss$/,
     use: [
-      MiniCssExtractPlugin.loader,
+      {
+        loader: MiniCssExtractPlugin.loader,
+        options: {
+          publicPath: './',
+        },
+      },
       {
         loader: 'css-loader',
         options: {
diff --git a/scripts/webpack/webpack.dev.js b/scripts/webpack/webpack.dev.js
index 94977e64e03..234bac4fe51 100644
--- a/scripts/webpack/webpack.dev.js
+++ b/scripts/webpack/webpack.dev.js
@@ -74,7 +74,7 @@ module.exports = (env = {}) => {
         },
         require('./sass.rule.js')({
           sourceMap: false,
-          preserveUrl: false,
+          preserveUrl: true,
         }),
       ],
     },
diff --git a/scripts/webpack/webpack.prod.js b/scripts/webpack/webpack.prod.js
index 98768225963..2edb26d8be9 100644
--- a/scripts/webpack/webpack.prod.js
+++ b/scripts/webpack/webpack.prod.js
@@ -47,7 +47,7 @@ module.exports = (env = {}) =>
         },
         require('./sass.rule.js')({
           sourceMap: false,
-          preserveUrl: false,
+          preserveUrl: true,
         }),
       ],
     },