feat(server,admin-ui): Auto-detect api host & port for admin ui

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

@@ -39,6 +39,8 @@ export function createApollo(
     fetchAdapter: FetchAdapter,
 ): ApolloClientOptions<any> {
     const { apiHost, apiPort, adminApiPath } = getAppConfig();
+    const host = apiHost === 'auto' ? `${location.protocol}//${location.hostname}` : apiHost;
+    const port = apiPort === 'auto' ? (location.port === '' ? '' : `:${location.port}`) : apiPort;
     return {
         link: ApolloLink.from([
             stateLink,
@@ -54,7 +56,7 @@ export function createApollo(
                 }
             }),
             createUploadLink({
-                uri: `${apiHost}:${apiPort}/${adminApiPath}`,
+                uri: `${host}${port}/${adminApiPath}`,
                 fetch: fetchAdapter.fetch,
             }),
         ]),

server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vendure/core",
-  "version": "0.1.0-alpha.9",
+  "version": "0.1.0-alpha.10",
   "description": "A modern, headless ecommerce framework",
   "repository": {
     "type": "git",

server/src/plugin/admin-ui-plugin/admin-ui-plugin.ts

@@ -7,26 +7,64 @@ import { VendureConfig } from '../../config/vendure-config';
 import { InjectorFn, VendurePlugin } from '../../config/vendure-plugin/vendure-plugin';
 import { createProxyHandler } from '../plugin-utils';
 
+/**
+ * @description
+ * Configuration options for the {@link AdminUiPlugin}.
+ *
+ * @docsCategory plugin
+ */
 export interface AdminUiOptions {
+    /**
+     * @description
+     * The hostname of the server serving the static admin ui files.
+     *
+     * @default 'localhost'
+     */
     hostname?: string;
+    /**
+     * @description
+     * The port on which the server will listen.
+     */
     port: number;
+    /**
+     * @description
+     * The hostname of the Vendure server which the admin ui will be making API calls
+     * to. If set to "auto", the admin ui app will determine the hostname from the
+     * current location (i.e. `window.location.hostname`).
+     *
+     * @default 'auto'
+     */
+    apiHost?: string | 'auto';
+    /**
+     * @description
+     * The port of the Vendure server which the admin ui will be making API calls
+     * to. If set to "auto", the admin ui app will determine the port from the
+     * current location (i.e. `window.location.port`).
+     *
+     * @default 'auto'
+     */
+    apiPort?: number | 'auto';
 }
 
 /**
+ * @description
  * This plugin starts a static server for the Admin UI app, and proxies it via the `/admin/` path
  * of the main Vendure server.
+ *
+ * @docsCategory plugin
  */
 export class AdminUiPlugin implements VendurePlugin {
     constructor(private options: AdminUiOptions) {}
 
     async configure(config: Required<VendureConfig>): Promise<Required<VendureConfig>> {
         const route = 'admin';
-        const { hostname, port, adminApiPath } = config;
         config.middleware.push({
             handler: createProxyHandler({ ...this.options, route }, !config.silent),
             route,
         });
-        await this.overwriteAdminUiConfig(hostname, port, adminApiPath);
+        const { adminApiPath } = config;
+        const { apiHost, apiPort } = this.options;
+        await this.overwriteAdminUiConfig(apiHost || 'auto', apiPort || 'auto', adminApiPath);
         return config;
     }
 
@@ -44,7 +82,7 @@ export class AdminUiPlugin implements VendurePlugin {
      * Overwrites the parts of the admin-ui app's `vendure-ui-config.json` file relating to connecting to
      * the server admin API.
      */
-    private async overwriteAdminUiConfig(host: string, port: number, adminApiPath: string) {
+    private async overwriteAdminUiConfig(host: string | 'auto', port: number | 'auto', adminApiPath: string) {
         const adminUiConfigPath = path.join(this.getAdminUiPath(), 'vendure-ui-config.json');
         const adminUiConfig = await fs.readFile(adminUiConfigPath, 'utf-8');
         const config: AdminUiConfig = JSON.parse(adminUiConfig);

shared/shared-types.ts

@@ -94,7 +94,7 @@ export type CustomFieldsObject = { [key: string]: any; };
  * This interface describes the shape of the JSON config file used by the Admin UI.
  */
 export interface AdminUiConfig {
-    apiHost: string;
-    apiPort: number;
+    apiHost: string | 'auto';
+    apiPort: number | 'auto';
     adminApiPath: string;
 }