From 80462ba3b6672648f6add93933bd844afd1cc319 Mon Sep 17 00:00:00 2001 From: Mcat12 Date: Sat, 6 Apr 2019 16:56:15 -0700 Subject: [PATCH] Use relative paths when loading resources, and use injected base path The API will inject a base path via the `` element when serving the web interface. This will be used as the base path for resolving relative paths. These changes allow the web interface to be hosted on any path. Signed-off-by: Mcat12 --- package.json | 2 +- .../settings/__tests__/DHCPInfo.test.tsx | 2 +- src/index.tsx | 3 ++- src/util/http.tsx | 2 +- src/util/index.tsx | 21 +++++++++++++++++-- 5 files changed, 24 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 5ee4a1b..ec9de98 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "pi-hole_web", "version": "1.0.0", "private": true, - "homepage": "/admin", + "homepage": ".", "devDependencies": { "@types/chart.js": "^2.7.42", "@types/enzyme": "^3.1.15", diff --git a/src/components/settings/__tests__/DHCPInfo.test.tsx b/src/components/settings/__tests__/DHCPInfo.test.tsx index 176536b..8d481ac 100644 --- a/src/components/settings/__tests__/DHCPInfo.test.tsx +++ b/src/components/settings/__tests__/DHCPInfo.test.tsx @@ -16,7 +16,7 @@ import { WithNamespaces } from "react-i18next"; const tick = global.tick; -const endpoint = "/admin/api/settings/dhcp"; +const endpoint = "/api/settings/dhcp"; const fakeData = { active: true, ip_start: "192.168.1.50", diff --git a/src/index.tsx b/src/index.tsx index 1c0f292..81b85c6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -19,6 +19,7 @@ import "./scss/style.css"; import Full from "./containers/Full"; import api from "./util/api"; import { setupI18n } from "./util/i18n"; +import { getBasePath } from "./util"; // Before rendering anything, check if there is a session cookie. // Note: the user could have an old session, so the first API call @@ -28,7 +29,7 @@ api.loggedIn = document.cookie.includes("user_id="); setupI18n(); ReactDOM.render( - + diff --git a/src/util/http.tsx b/src/util/http.tsx index 6c3234f..7ce4c7e 100644 --- a/src/util/http.tsx +++ b/src/util/http.tsx @@ -155,7 +155,7 @@ const urlFor = (endpoint: string): string => { if (config.fakeAPI) { apiLocation = process.env.PUBLIC_URL + "/fakeAPI"; } else { - apiLocation = "/admin/api"; + apiLocation = process.env.PUBLIC_URL + "/api"; } return apiLocation + "/" + endpoint; diff --git a/src/util/index.tsx b/src/util/index.tsx index b16364d..b3da291 100644 --- a/src/util/index.tsx +++ b/src/util/index.tsx @@ -14,12 +14,29 @@ import { TimeRange } from "../components/common/context/TimeRangeContext"; * Pad a two digit number * * @param num the number - * @returns {string} a padding number string + * @returns A padding number string */ -export const padNumber = (num: number) => { +export const padNumber = (num: number): string => { return ("00" + num).substr(-2, 2); }; +/** + * Get the base path of the web interface. The API will inject a base element + * for this purpose, but if the web interface is not hosted by the API, it will + * fall back to the public URL set by Create React App. + * + * @returns The base path to use + */ +export const getBasePath = (): string => { + const baseElement = document.getElementsByTagName("base")[0]; + + if (baseElement) { + return new URL(baseElement.href).pathname; + } else { + return process.env.PUBLIC_URL; + } +}; + /** * Dynamically calculate a time interval so there are always 144 data points * (144 so that every point represents 10 minutes when the range is 24 hours)