Grafana failed to load application files behind nginx

So I’ve been fighting with this for a while and no matter what I do I can’t seem to get it going. Everything was fine when I just accessed it straight from :3000 but I want to be able to access it through an nginx redirect /grafana/.

First I tried the old method of rewrites with something like this in my nginx.conf

location /grafana/ {
proxy_pass hxxp://localhost:3000;
rewrite ^/grafana/(.*) /$1 break;
include nginxconfig.io/proxy.conf;
}

I’ve set the grafana.ini a number of ways to no avail.

If I’m passing the data from nginx.conf to localhost should I be setting the root_url to localhost or my actual domain? I’ve tried both.

I’m also aware that in later versions I don’t need to do any rewriting and I can simply do a

location /grafana/ {
proxy_pass hxxp://localhost:3000;
}

The furthest I get is the error on the login page
If you’re seeing this Grafana has failed to load its application files

Here is my current full nginx config.

server {
	listen 443 ssl http2;
	listen [::]:443 ssl http2;

	server_name www.example.com;
	root /var/www/html/example;
	modsecurity on;
    modsecurity_rules_file /etc/nginx/modsec/main.conf;

	# SSL
	ssl_certificate ommited;
	ssl_certificate_key ommited;
	ssl_trusted_certificate ommited;

	# security
	include nginxconfig.io/security.conf;
	
	# index.html fallback
	location / {
		try_files $uri $uri/main.html;
	}
	
	# reverse proxy
	location /grafana/ {
		proxy_pass http://localhost:3000;
		include nginxconfig.io/proxy.conf;  
	}

	# additional config
	include nginxconfig.io/general.conf;
	include /etc/nginx/conf.d/*.conf;
}

# non-www, subdomains redirect
server {
	listen 443 ssl http2;
	listen [::]:443 ssl http2;

	server_name .yivointel.com;

	return 301 hxxps://www.example.com$request_uri;
}

# HTTP redirect
server {
	listen 80;
	listen [::]:80;

	server_name .example.com;

	include nginxconfig.io/letsencrypt.conf;

	location / {
		return 301 https://www.example.com$request_uri;
	}
}

Here is the grafana.ini

[server]
protocol = http

http_addr =

http_port = 3000

domain = localhost

;enforce_domain = false

root_url = http://localhost:3000/grafana/

serve_from_sub_path = true

After poking a bit more I finally got it going I think. It was this block in the nginx.conf to serve my main.html but it was serving it across all locations it seems.

location / {
try_files $uri $uri/main.html;
}

Can you share what you did to fix this? I am serving a react app so I need that location block. I am getting the same error when trying to embed grafana in an iframe in my react app.