feat: removed plugin and serving the index.html only as the template

feat: refactor the interceptor and added gotmpl into gitignore
feat: changed output path to dir level
2026-04-15 16:30:27 +01:00 · 2026-04-15 20:52:04 +05:30 · 2026-04-15 20:14:54 +05:30 · 2026-04-15 19:53:57 +05:30 · 2026-04-15 18:56:48 +05:30
9 changed files with 126 additions and 6 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -28,4 +28,7 @@ e2e/test-plan/saved-views/
 e2e/test-plan/service-map/
 e2e/test-plan/services/
 e2e/test-plan/traces/
-e2e/test-plan/user-preferences/
+e2e/test-plan/user-preferences/
+
+# Generated by `vite build` — do not commit
+index.html.gotmpl
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
+		<base href="[[.BasePath]]" />
 		<meta
 			http-equiv="Cache-Control"
 			content="no-cache, no-store, must-revalidate, max-age: 0"
@@ -59,7 +60,7 @@
 		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
 		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
 		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
+		<link data-react-helmet="true" rel="shortcut icon" href="favicon.ico" />
 	</head>
 	<body data-theme="default">
 		<noscript>You need to enable JavaScript to run this app.</noscript>
@@ -113,7 +114,7 @@
 				})(document, 'script');
 			}
 		</script>
-		<link rel="stylesheet" href="/css/uPlot.min.css" />
+		<link rel="stylesheet" href="css/uPlot.min.css" />
 		<script type="module" src="./src/index.tsx"></script>
 	</body>
 </html>
--- a/frontend/src/api/generatedAPIInstance.ts
+++ b/frontend/src/api/generatedAPIInstance.ts
@@ -1,5 +1,6 @@
 import {
 	interceptorRejected,
+	interceptorsRequestBasePath,
 	interceptorsRequestResponse,
 	interceptorsResponse,
 } from 'api';
@@ -17,6 +18,7 @@ export const GeneratedAPIInstance = <T>(
 	return generatedAPIAxiosInstance({ ...config }).then(({ data }) => data);
 };

+generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 generatedAPIAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
 generatedAPIAxiosInstance.interceptors.response.use(
 	interceptorsResponse,
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -11,6 +11,7 @@ import axios, {
 import { ENVIRONMENT } from 'constants/env';
 import { Events } from 'constants/events';
 import { LOCALSTORAGE } from 'constants/localStorage';
+import { getBasePath } from 'utils/getBasePath';
 import { eventEmitter } from 'utils/getEventEmitter';

 import apiV1, { apiAlertManager, apiV2, apiV3, apiV4, apiV5 } from './apiV1';
@@ -67,6 +68,28 @@ export const interceptorsRequestResponse = (
 	return value;
 };

+// Prepends the runtime base path to outgoing requests so API calls work under
+// a URL prefix (e.g. /signoz/api/v1/…). No-op for root deployments and dev
+// (dev baseURL is a full http:// URL, not an absolute path).
+export const interceptorsRequestBasePath = (
+	value: InternalAxiosRequestConfig,
+): InternalAxiosRequestConfig => {
+	const basePath = getBasePath();
+	if (basePath === '/') {
+		return value;
+	}
+
+	if (value.baseURL?.startsWith('/')) {
+		// Named instances: baseURL='/api/v1/' → '/signoz/api/v1/'
+		value.baseURL = basePath + value.baseURL.slice(1);
+	} else if (!value.baseURL && value.url?.startsWith('/')) {
+		// Generated instance: baseURL is '' in prod, path is in url
+		value.url = basePath + value.url.slice(1);
+	}
+
+	return value;
+};
+
 export const interceptorRejected = async (
 	value: AxiosResponse<any>,
 ): Promise<AxiosResponse<any>> => {
@@ -133,6 +156,7 @@ const instance = axios.create({
 });

 instance.interceptors.request.use(interceptorsRequestResponse);
+instance.interceptors.request.use(interceptorsRequestBasePath);
 instance.interceptors.response.use(interceptorsResponse, interceptorRejected);

 export const AxiosAlertManagerInstance = axios.create({
@@ -147,6 +171,7 @@ ApiV2Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV2Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV2Instance.interceptors.request.use(interceptorsRequestBasePath);

 // axios V3
 export const ApiV3Instance = axios.create({
@@ -158,6 +183,7 @@ ApiV3Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV3Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV3Instance.interceptors.request.use(interceptorsRequestBasePath);
 //

 // axios V4
@@ -170,6 +196,7 @@ ApiV4Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV4Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV4Instance.interceptors.request.use(interceptorsRequestBasePath);
 //

 // axios V5
@@ -182,6 +209,7 @@ ApiV5Instance.interceptors.response.use(
 	interceptorRejected,
 );
 ApiV5Instance.interceptors.request.use(interceptorsRequestResponse);
+ApiV5Instance.interceptors.request.use(interceptorsRequestBasePath);
 //

 // axios Base
@@ -194,6 +222,7 @@ LogEventAxiosInstance.interceptors.response.use(
 	interceptorRejectedBase,
 );
 LogEventAxiosInstance.interceptors.request.use(interceptorsRequestResponse);
+LogEventAxiosInstance.interceptors.request.use(interceptorsRequestBasePath);
 //

 AxiosAlertManagerInstance.interceptors.response.use(
@@ -201,6 +230,7 @@ AxiosAlertManagerInstance.interceptors.response.use(
 	interceptorRejected,
 );
 AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestResponse);
+AxiosAlertManagerInstance.interceptors.request.use(interceptorsRequestBasePath);

 export { apiV1 };
 export default instance;
--- a/frontend/src/lib/history.ts
+++ b/frontend/src/lib/history.ts
@@ -1,3 +1,4 @@
 import { createBrowserHistory } from 'history';
+import { getBasePath } from 'utils/getBasePath';

-export default createBrowserHistory();
+export default createBrowserHistory({ basename: getBasePath() });
--- a/frontend/src/pages/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx
+++ b/frontend/src/pages/ErrorBoundaryFallback/ErrorBoundaryFallback.tsx
@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import { Button } from 'antd';
 import ROUTES from 'constants/routes';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import history from 'lib/history';
 import { Home, LifeBuoy } from 'lucide-react';
 import { handleContactSupport } from 'pages/Integrations/utils';

@@ -11,8 +12,9 @@ import './ErrorBoundaryFallback.styles.scss';

 function ErrorBoundaryFallback(): JSX.Element {
 	const handleReload = (): void => {
-		// Go to home page
-		window.location.href = ROUTES.HOME;
+		// Use history.push so the navigation stays within the base path prefix
+		// (window.location.href would strip any /signoz/ prefix).
+		history.push(ROUTES.HOME);
 	};

 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
--- a/frontend/src/utils/tests/getBasePath.test.ts
+++ b/frontend/src/utils/tests/getBasePath.test.ts
@@ -0,0 +1,50 @@
+import { getBasePath } from 'utils/getBasePath';
+
+/**
+ * Contract tests for getBasePath().
+ *
+ * These lock down the exact DOM-reading contract so that any future change to
+ * the utility (or to how index.html injects the <base> tag) surfaces
+ * immediately as a test failure.
+ */
+describe('getBasePath', () => {
+	afterEach(() => {
+		// Remove any <base> elements added during the test.
+		document.head.querySelectorAll('base').forEach((el) => el.remove());
+	});
+
+	it('returns the href from the <base> tag when present', () => {
+		const base = document.createElement('base');
+		base.setAttribute('href', '/signoz/');
+		document.head.appendChild(base);
+
+		expect(getBasePath()).toBe('/signoz/');
+	});
+
+	it('returns "/" when no <base> tag exists in the document', () => {
+		expect(getBasePath()).toBe('/');
+	});
+
+	it('returns "/" when the <base> tag has no href attribute', () => {
+		const base = document.createElement('base');
+		document.head.appendChild(base);
+
+		expect(getBasePath()).toBe('/');
+	});
+
+	it('returns the href unchanged when it already has a trailing slash', () => {
+		const base = document.createElement('base');
+		base.setAttribute('href', '/my/nested/path/');
+		document.head.appendChild(base);
+
+		expect(getBasePath()).toBe('/my/nested/path/');
+	});
+
+	it('appends a trailing slash when the href is missing one', () => {
+		const base = document.createElement('base');
+		base.setAttribute('href', '/signoz');
+		document.head.appendChild(base);
+
+		expect(getBasePath()).toBe('/signoz/');
+	});
+});
--- a/frontend/src/utils/getBasePath.ts
+++ b/frontend/src/utils/getBasePath.ts
@@ -0,0 +1,17 @@
+/**
+ * Returns the base path for this SigNoz deployment by reading the
+ * `<base href>` element injected into index.html by the Go backend at
+ * serve time.
+ *
+ * Always returns a string ending with `/` (e.g. `/`, `/signoz/`).
+ * Falls back to `/` when no `<base>` element is present so the app
+ * behaves correctly in local Vite dev and unit-test environments.
+ *
+ * @internal — consume through `src/lib/history` and the axios interceptor;
+ * do not read `<base>` directly anywhere else in the codebase.
+ */
+export function getBasePath(): string {
+	const href = document.querySelector('base')?.getAttribute('href') ?? '/';
+	// Trailing slash is required for relative asset resolution and API prefixing.
+	return href.endsWith('/') ? href : `${href}/`;
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -10,6 +10,18 @@ import { createHtmlPlugin } from 'vite-plugin-html';
 import { ViteImageOptimizer } from 'vite-plugin-image-optimizer';
 import tsconfigPaths from 'vite-tsconfig-paths';

+// In dev the Go backend is not involved, so replace the [[.BasePath]] placeholder
+// with "/" so relative assets resolve correctly from the Vite dev server.
+function devBasePathPlugin(): Plugin {
+	return {
+		name: 'dev-base-path',
+		apply: 'serve',
+		transformIndexHtml(html): string {
+			return html.replace('[[.BasePath]]', '/');
+		},
+	};
+}
+
 function rawMarkdownPlugin(): Plugin {
 	return {
 		name: 'raw-markdown',
@@ -32,6 +44,7 @@ export default defineConfig(
 		const plugins = [
 			tsconfigPaths(),
 			rawMarkdownPlugin(),
+			devBasePathPlugin(),
 			react(),
 			createHtmlPlugin({
 				inject: {
@@ -124,6 +137,7 @@ export default defineConfig(
 				'process.env.TUNNEL_DOMAIN': JSON.stringify(env.VITE_TUNNEL_DOMAIN),
 				'process.env.DOCS_BASE_URL': JSON.stringify(env.VITE_DOCS_BASE_URL),
 			},
+			base: './',
 			build: {
 				sourcemap: true,
 				outDir: 'build',
Author	SHA1	Message	Date
SagarRajput-7	17e6d27698	feat: removed plugin and serving the index.html only as the template	2026-04-15 20:52:04 +05:30
SagarRajput-7	09dfadb1ea	feat: refactor the interceptor and added gotmpl into gitignore	2026-04-15 20:14:54 +05:30
SagarRajput-7	04e01474ff	feat: changed output path to dir level	2026-04-15 19:53:57 +05:30
SagarRajput-7	6c07b60f06	feat: base path config setup and plugin for gotmpl generation at build time	2026-04-15 18:56:48 +05:30