feat(admin-ui): Add runtime config for connection settings

Relates to #66

admin-ui/angular.json

@@ -25,6 +25,7 @@
             "tsConfig": "src/tsconfig.app.json",
             "assets": [
               "src/favicon.ico",
+              "src/vendure-ui-config.json",
               "src/assets",
               "src/i18n-messages"
             ],

admin-ui/src/app/app.config.ts

@@ -1,6 +1,22 @@
 import { LanguageCode } from 'shared/generated-types';
-import { API_PORT } from 'shared/shared-constants';
+import { AdminUiConfig } from 'shared/shared-types';
 
-export const API_URL = `http://localhost:${API_PORT}`;
 export const DEFAULT_LANGUAGE: LanguageCode = LanguageCode.en;
 export const DEFAULT_CURRENCY = '£';
+
+let vendureUiConfig: AdminUiConfig | undefined;
+
+export function loadAppConfig(): Promise<void> {
+    return fetch('./vendure-ui-config.json')
+        .then(res => res.json())
+        .then(config => {
+            vendureUiConfig = config;
+        });
+}
+
+export function getAppConfig(): AdminUiConfig {
+    if (!vendureUiConfig) {
+        throw new Error(`vendure ui config not loaded`);
+    }
+    return vendureUiConfig;
+}

admin-ui/src/app/data/data.module.ts

@@ -7,10 +7,9 @@ import { ApolloLink } from 'apollo-link';
 import { setContext } from 'apollo-link-context';
 import { withClientState } from 'apollo-link-state';
 import { createUploadLink } from 'apollo-upload-client';
-import { ADMIN_API_PATH } from 'shared/shared-constants';
 
 import { environment } from '../../environments/environment';
-import { API_URL } from '../app.config';
+import { getAppConfig } from '../app.config';
 import { LocalStorageService } from '../core/providers/local-storage/local-storage.service';
 
 import { clientDefaults } from './client-state/client-defaults';
@@ -39,6 +38,7 @@ export function createApollo(
     localStorageService: LocalStorageService,
     fetchAdapter: FetchAdapter,
 ): ApolloClientOptions<any> {
+    const { apiHost, apiPort, adminApiPath } = getAppConfig();
     return {
         link: ApolloLink.from([
             stateLink,
@@ -54,7 +54,7 @@ export function createApollo(
                 }
             }),
             createUploadLink({
-                uri: `${API_URL}/${ADMIN_API_PATH}`,
+                uri: `${apiHost}:${apiPort}/${adminApiPath}`,
                 fetch: fetchAdapter.fetch,
             }),
         ]),

admin-ui/src/app/data/providers/base-data.service.ts

@@ -9,7 +9,6 @@ import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { CustomFields } from 'shared/shared-types';
 
-import { API_URL } from '../../app.config';
 import { LocalStorageService } from '../../core/providers/local-storage/local-storage.service';
 import { addCustomFields } from '../add-custom-fields';
 import { QueryResult } from '../query-result';
@@ -71,37 +70,4 @@ export class BaseDataService {
             })
             .pipe(map(result => result.data as T));
     }
-
-    /**
-     * Perform REST-like POST
-     */
-    post(path: string, payload: Record<string, any>): Observable<any> {
-        return this.httpClient
-            .post(`${API_URL}/${path}`, payload, {
-                headers: {
-                    Authorization: this.getAuthHeader(),
-                },
-                observe: 'response',
-            })
-            .pipe(map(response => response.body));
-    }
-
-    /**
-     * Perform REST-like GET
-     */
-    get(path: string): Observable<any> {
-        return this.httpClient
-            .get(`${API_URL}/${path}`, {
-                headers: {
-                    Authorization: this.getAuthHeader(),
-                },
-                observe: 'response',
-            })
-            .pipe(map(response => response.body));
-    }
-
-    private getAuthHeader(): string {
-        const authToken = this.localStorageService.get('authToken');
-        return `Bearer ${authToken}`;
-    }
 }

admin-ui/src/app/data/providers/interceptor.ts

@@ -11,7 +11,7 @@ import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 
-import { API_URL } from '../../app.config';
+import { getAppConfig } from '../../app.config';
 import { AuthService } from '../../core/providers/auth/auth.service';
 import { _ } from '../../core/providers/i18n/mark-for-extraction';
 import { LocalStorageService } from '../../core/providers/local-storage/local-storage.service';
@@ -60,7 +60,10 @@ export class DefaultInterceptor implements HttpInterceptor {
     private notifyOnError(response: HttpResponse<any> | HttpErrorResponse) {
         if (response instanceof HttpErrorResponse) {
             if (response.status === 0) {
-                this.displayErrorNotification(_(`error.could-not-connect-to-server`), { url: API_URL });
+                const { apiHost, apiPort } = getAppConfig();
+                this.displayErrorNotification(_(`error.could-not-connect-to-server`), {
+                    url: `${apiHost}:${apiPort}`,
+                });
             } else {
                 this.displayErrorNotification(response.toString());
             }

admin-ui/src/main.ts

@@ -1,6 +1,7 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
+import { loadAppConfig } from './app/app.config';
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
@@ -8,8 +9,8 @@ if (environment.production) {
     enableProdMode();
 }
 
-platformBrowserDynamic()
-    .bootstrapModule(AppModule)
+loadAppConfig()
+    .then(() => platformBrowserDynamic().bootstrapModule(AppModule))
     .catch(err => {
         // tslint:disable:no-console
         console.log(err);

admin-ui/src/vendure-ui-config.json

@@ -0,0 +1,5 @@
+{
+  "apiHost": "http://localhost",
+  "apiPort": 3000,
+  "adminApiPath": "admin-api"
+}