feat(server): AdminUiPlugin dynamically configures the admin ui

Closes #66

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

@@ -2,6 +2,7 @@ import express from 'express';
 import fs from 'fs-extra';
 import path from 'path';
 
+import { AdminUiConfig } from '../../../../shared/shared-types';
 import { VendureConfig } from '../../config/vendure-config';
 import { InjectorFn, VendurePlugin } from '../../config/vendure-plugin/vendure-plugin';
 import { createProxyHandler } from '../plugin-utils';
@@ -18,12 +19,14 @@ export interface AdminUiOptions {
 export class AdminUiPlugin implements VendurePlugin {
     constructor(private options: AdminUiOptions) {}
 
-    configure(config: Required<VendureConfig>): Required<VendureConfig> {
+    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);
         return config;
     }
 
@@ -37,6 +40,20 @@ export class AdminUiPlugin implements VendurePlugin {
         assetServer.listen(this.options.port);
     }
 
+    /**
+     * 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) {
+        const adminUiConfigPath = path.join(this.getAdminUiPath(), 'vendure-ui-config.json');
+        const adminUiConfig = await fs.readFile(adminUiConfigPath, 'utf-8');
+        const config: AdminUiConfig = JSON.parse(adminUiConfig);
+        config.apiHost = host || 'http://localhost';
+        config.apiPort = port;
+        config.adminApiPath = adminApiPath;
+        await fs.writeFile(adminUiConfigPath, JSON.stringify(config, null, 2));
+    }
+
     private getAdminUiPath(): string {
         // attempt to read the index.html file from the Vendure dist bundle (as when installed
         // in an end-user project)

shared/shared-constants.ts

@@ -2,7 +2,7 @@
  * This file contains constants which are shared between more than one sub-module
  * e.g. values required by both the server and admin-ui.
  */
-export const API_PORT = 5000;
+export const API_PORT = 3000;
 export const ADMIN_API_PATH = 'admin-api';
 export const SHOP_API_PATH = 'shop-api';
 export const DEFAULT_CHANNEL_CODE = '__default_channel__';

shared/shared-types.ts

@@ -89,3 +89,12 @@ export interface HasCustomFields {
 export type MayHaveCustomFields = Partial<HasCustomFields>;
 
 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;
+    adminApiPath: string;
+}