diff --git a/frontend/projects/diagnostic-ui/src/app/app.module.ts b/frontend/projects/diagnostic-ui/src/app/app.module.ts
index 73e7b7bf7..78ebf4090 100644
--- a/frontend/projects/diagnostic-ui/src/app/app.module.ts
+++ b/frontend/projects/diagnostic-ui/src/app/app.module.ts
@@ -1,4 +1,4 @@
-import { ErrorHandler, NgModule } from '@angular/core'
+import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { RouteReuseStrategy } from '@angular/router'
 import { IonicModule, IonicRouteStrategy } from '@ionic/angular'
@@ -8,9 +8,12 @@ import { HttpClientModule } from '@angular/common/http'
 import { ApiService } from './services/api/api.service'
 import { MockApiService } from './services/api/mock-api.service'
 import { LiveApiService } from './services/api/live-api.service'
-import { WorkspaceConfig } from '@start9labs/shared'
+import { RELATIVE_URL, WorkspaceConfig } from '@start9labs/shared'
 
-const { useMocks } = require('../../../../config.json') as WorkspaceConfig
+const {
+  useMocks,
+  ui: { api },
+} = require('../../../../config.json') as WorkspaceConfig
 
 @NgModule({
   declarations: [AppComponent],
@@ -28,6 +31,10 @@ const { useMocks } = require('../../../../config.json') as WorkspaceConfig
       provide: ApiService,
       useClass: useMocks ? MockApiService : LiveApiService,
     },
+    {
+      provide: RELATIVE_URL,
+      useValue: `/${api.url}/${api.version}`,
+    },
   ],
   bootstrap: [AppComponent],
 })
diff --git a/frontend/projects/setup-wizard/src/app/app.module.ts b/frontend/projects/setup-wizard/src/app/app.module.ts
index 097710642..4682f4b89 100644
--- a/frontend/projects/setup-wizard/src/app/app.module.ts
+++ b/frontend/projects/setup-wizard/src/app/app.module.ts
@@ -16,9 +16,12 @@ import { SuccessPageModule } from './pages/success/success.module'
 import { HomePageModule } from './pages/home/home.module'
 import { LoadingPageModule } from './pages/loading/loading.module'
 import { RecoverPageModule } from './pages/recover/recover.module'
-import { WorkspaceConfig } from '@start9labs/shared'
+import { RELATIVE_URL, WorkspaceConfig } from '@start9labs/shared'
 
-const { useMocks } = require('../../../../config.json') as WorkspaceConfig
+const {
+  useMocks,
+  ui: { api },
+} = require('../../../../config.json') as WorkspaceConfig
 
 @NgModule({
   declarations: [AppComponent],
@@ -41,6 +44,10 @@ const { useMocks } = require('../../../../config.json') as WorkspaceConfig
       provide: ApiService,
       useClass: useMocks ? MockApiService : LiveApiService,
     },
+    {
+      provide: RELATIVE_URL,
+      useValue: `/${api.url}/${api.version}`,
+    },
   ],
   bootstrap: [AppComponent],
 })
diff --git a/frontend/projects/shared/src/public-api.ts b/frontend/projects/shared/src/public-api.ts
index 375364baa..75adead29 100644
--- a/frontend/projects/shared/src/public-api.ts
+++ b/frontend/projects/shared/src/public-api.ts
@@ -45,6 +45,8 @@ export * from './types/rpc.types'
 export * from './types/url'
 export * from './types/workspace-config'
 
+export * from './tokens/relative-url'
+
 export * from './util/copy-to-clipboard'
 export * from './util/base-64'
 export * from './util/get-pkg-id'
diff --git a/frontend/projects/shared/src/services/http.service.ts b/frontend/projects/shared/src/services/http.service.ts
index 99d3647b7..e294d4ef6 100644
--- a/frontend/projects/shared/src/services/http.service.ts
+++ b/frontend/projects/shared/src/services/http.service.ts
@@ -1,14 +1,6 @@
+import { DOCUMENT } from '@angular/common'
 import { Inject, Injectable } from '@angular/core'
 import { HttpClient } from '@angular/common/http'
-import { HttpError } from '../classes/http-error'
-import {
-  HttpAngularOptions,
-  HttpOptions,
-  LocalHttpResponse,
-  Method,
-} from '../types/http.types'
-import { RPCResponse, RPCOptions } from '../types/rpc.types'
-import { WorkspaceConfig } from '../types/workspace-config'
 import {
   firstValueFrom,
   from,
@@ -19,20 +11,25 @@ import {
   race,
   take,
 } from 'rxjs'
-import { DOCUMENT } from '@angular/common'
 
-const {
-  ui: { api },
-} = require('../../../../config.json') as WorkspaceConfig
+import { HttpError } from '../classes/http-error'
+import {
+  HttpAngularOptions,
+  HttpOptions,
+  LocalHttpResponse,
+  Method,
+} from '../types/http.types'
+import { RPCResponse, RPCOptions } from '../types/rpc.types'
+import { RELATIVE_URL } from '../tokens/relative-url'
 
 @Injectable({
   providedIn: 'root',
 })
 export class HttpService {
-  relativeUrl = `/${api.url}/${api.version}`
   private fullUrl: string
 
   constructor(
+    @Inject(RELATIVE_URL) private readonly relativeUrl: string,
     @Inject(DOCUMENT) private readonly document: Document,
     private readonly http: HttpClient,
   ) {
diff --git a/frontend/projects/shared/src/tokens/relative-url.ts b/frontend/projects/shared/src/tokens/relative-url.ts
new file mode 100644
index 000000000..8524a04d9
--- /dev/null
+++ b/frontend/projects/shared/src/tokens/relative-url.ts
@@ -0,0 +1,5 @@
+import { InjectionToken } from '@angular/core'
+
+export const RELATIVE_URL = new InjectionToken<string>(
+  'Relative URL for requests',
+)
diff --git a/frontend/projects/ui/src/app/app.providers.ts b/frontend/projects/ui/src/app/app.providers.ts
index 73024e61a..d716dbb13 100644
--- a/frontend/projects/ui/src/app/app.providers.ts
+++ b/frontend/projects/ui/src/app/app.providers.ts
@@ -2,7 +2,7 @@ import { APP_INITIALIZER, Provider } from '@angular/core'
 import { UntypedFormBuilder } from '@angular/forms'
 import { Router, RouteReuseStrategy } from '@angular/router'
 import { IonicRouteStrategy, IonNav } from '@ionic/angular'
-import { WorkspaceConfig } from '@start9labs/shared'
+import { RELATIVE_URL, WorkspaceConfig } from '@start9labs/shared'
 import { ApiService } from './services/api/embassy-api.service'
 import { MockApiService } from './services/api/embassy-mock-api.service'
 import { LiveApiService } from './services/api/embassy-live-api.service'
@@ -10,7 +10,10 @@ import { AuthService } from './services/auth.service'
 import { ClientStorageService } from './services/client-storage.service'
 import { FilterPackagesPipe } from '../../../marketplace/src/pipes/filter-packages.pipe'
 
-const { useMocks } = require('../../../../config.json') as WorkspaceConfig
+const {
+  useMocks,
+  ui: { api },
+} = require('../../../../config.json') as WorkspaceConfig
 
 export const APP_PROVIDERS: Provider[] = [
   FilterPackagesPipe,
@@ -30,6 +33,10 @@ export const APP_PROVIDERS: Provider[] = [
     useFactory: appInitializer,
     multi: true,
   },
+  {
+    provide: RELATIVE_URL,
+    useValue: `/${api.url}/${api.version}`,
+  },
 ]
 
 export function appInitializer(