diff --git a/ui/public/index.html b/ui/public/index.html
index 0f51e6aca..5d50c3ffa 100644
--- a/ui/public/index.html
+++ b/ui/public/index.html
@@ -4,7 +4,7 @@
     <title>Shibboleth IDP UI</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <base href="/">
+    <base href="%PUBLIC_URL%/">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link rel="icon" type="image/png" sizes="96x96" href="assets/favicon-96x96.png">
   </head>
diff --git a/ui/src/app/App.js b/ui/src/app/App.js
index 77a41a73e..0040c470c 100644
--- a/ui/src/app/App.js
+++ b/ui/src/app/App.js
@@ -70,7 +70,7 @@ function App() {
                         <Contention>
                             <UserConfirmation>
                                 {(message, confirm, confirmCallback, setConfirm, getConfirmation) =>
-                                    <Router getUserConfirmation={getConfirmation} basename={BASE_PATH}>
+                                    <Router getUserConfirmation={getConfirmation} basename={`/${BASE_PATH}`}>
                                         <ConfirmWindow message={message} confirm={confirm} confirmCallback={confirmCallback} setConfirm={setConfirm} />
                                         <QueryParamProvider ReactRouterRoute={Route}>
                                         <Header />
diff --git a/ui/src/app/core/components/VersionInfo.js b/ui/src/app/core/components/VersionInfo.js
index a833cec08..d687e810e 100644
--- a/ui/src/app/core/components/VersionInfo.js
+++ b/ui/src/app/core/components/VersionInfo.js
@@ -16,7 +16,7 @@ export function VersionInfo () {
             'mode':'no-cors'
         }
     }
-    const { data = {} } = useFetch(`${ACTUATOR_PATH}/info`, opts, []);
+    const { data = {} } = useFetch(`${ACTUATOR_PATH}info`, opts, []);
 
     const [ versionData, setVersionData ] = React.useState('');
 
diff --git a/ui/src/app/metadata/domain/attribute/AttributeBundleDefinition.js b/ui/src/app/metadata/domain/attribute/AttributeBundleDefinition.js
index f94bec721..ca94e417d 100644
--- a/ui/src/app/metadata/domain/attribute/AttributeBundleDefinition.js
+++ b/ui/src/app/metadata/domain/attribute/AttributeBundleDefinition.js
@@ -1,10 +1,11 @@
 import { defaultsDeep } from "lodash";
+import { BASE_PATH } from '../../../App.constant';
 
 export const AttributeBundleDefinition = {
     label: 'Metadata Attribute Bundle',
     type: '@MetadataAttributeBundle',
     steps: [],
-    schema: `/assets/schema/attribute/bundle.schema.json`,
+    schema: `${BASE_PATH}assets/schema/attribute/bundle.schema.json`,
 
     uiSchema: {
         attributes: {
diff --git a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js
index dc8ec7581..36d7226cd 100644
--- a/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js
+++ b/ui/src/app/metadata/domain/filter/component/MetadataFilterConfigurationListItem.js
@@ -18,7 +18,7 @@ export function MetadataFilterConfigurationListItem ({ filter, isLast, isFirst,
 
     const definition = React.useMemo(() => getDefinition(filter['@type'], ), [filter]);
 
-    const { get, response } = useFetch(`${BASE_PATH}`);
+    const { get, response } = useFetch(``);
 
     const [schema, setSchema] = React.useState();
 
diff --git a/ui/src/app/metadata/domain/provider/definition/FileBackedHttpMetadataProviderDefinition.js b/ui/src/app/metadata/domain/provider/definition/FileBackedHttpMetadataProviderDefinition.js
index adfa2c4ad..ad4e69806 100644
--- a/ui/src/app/metadata/domain/provider/definition/FileBackedHttpMetadataProviderDefinition.js
+++ b/ui/src/app/metadata/domain/provider/definition/FileBackedHttpMetadataProviderDefinition.js
@@ -199,7 +199,7 @@ export const FileBackedHttpMetadataProviderWizard = {
 
 export const FileBackedHttpMetadataProviderEditor = {
     ...FileBackedHttpMetadataProviderWizard,
-    schema: 'assets/schema/provider/filebacked-http.schema.json',
+    schema: `${BASE_PATH}assets/schema/provider/filebacked-http.schema.json`,
     steps: [
         {
             id: 'common',
diff --git a/ui/src/app/store/baseQuery.js b/ui/src/app/store/baseQuery.js
index 16aaca37d..cae6e0004 100644
--- a/ui/src/app/store/baseQuery.js
+++ b/ui/src/app/store/baseQuery.js
@@ -3,7 +3,7 @@ import API_BASE_PATH from '../App.constant';
 import { get_cookie } from '../core/utility/get_cookie';
 
 export const getBaseQuery = (config = {}) => fetchBaseQuery({
-    baseUrl: `${API_BASE_PATH}`,
+    baseUrl: `/${API_BASE_PATH}`,
     prepareHeaders: (headers) => {
         const token = get_cookie('XSRF-TOKEN');
 
diff --git a/ui/src/setupProxy.js b/ui/src/setupProxy.js
index bbd4523b8..ab33f75b5 100644
--- a/ui/src/setupProxy.js
+++ b/ui/src/setupProxy.js
@@ -5,10 +5,15 @@ module.exports = function (app) {
 
     const port = 8080;
 
+    const context = process.env.PUBLIC_URL;
+    const rewriteFn = function (path, req) {
+        return path.replace(context, '');
+    };
+
     app.use(
-        '/api',
+        `${context}/api`,
         createProxyMiddleware({
-            target: `http://localhost:${port}`,
+            target: `http://localhost:${port}${context}/`,
             changeOrigin: true,
             onProxyRes: function (proxyRes, req, res) {
                 proxyRes.headers['Access-Control-Allow-Origin'] = '*';
@@ -17,25 +22,25 @@ module.exports = function (app) {
     );
 
     app.use(
-        '/actuator',
+        `${context}/actuator`,
         createProxyMiddleware({
-            target: `http://localhost:${port}`,
+            target: `http://localhost:${port}${context}/`,
             changeOrigin: true
         })
     );
 
     app.use(
-        '/login',
+        `${context}/login`,
         createProxyMiddleware({
-            target: `http://localhost:${port}`,
+            target: `http://localhost:${port}${context}/`,
             changeOrigin: true
         })
     );
 
     app.use(
-        '/logout',
+        `${context}/logout`,
         createProxyMiddleware({
-            target: `http://localhost:${port}`,
+            target: `http://localhost:${port}${context}/`,
             changeOrigin: true
         })
     );