Quellcode durchsuchen

docs: Add docs on stand-alone Admin UI deployment

Michael Bromley vor 4 Jahren
Ursprung
Commit
07447adea7
1 geänderte Dateien mit 65 neuen und 1 gelöschten Zeilen
  1. 65 1
      docs/content/developer-guide/deployment.md

+ 65 - 1
docs/content/developer-guide/deployment.md

@@ -130,4 +130,68 @@ REQUEST: GET http://localhost:3020/health
 
 ## Admin UI
 
-If you have customized the Admin UI with extensions, it can make sense to [compile your extensions ahead-of-time as part of the deployment process]({{< relref "/docs/plugins/extending-the-admin-ui" >}}#compiling-as-a-deployment-step).
+If you have customized the Admin UI with extensions, you should [compile your extensions ahead-of-time as part of the deployment process]({{< relref "/docs/plugins/extending-the-admin-ui" >}}#compiling-as-a-deployment-step).
+
+### Deploying a stand-alone Admin UI
+
+Usually, the Admin UI is served from the Vendure server via the AdminUiPlugin. However, you may wish to deploy the Admin UI app elsewhere. Since it is just a static Angular app, it can be deployed to any static hosting service such as Vercel or Netlify.
+
+Here's an example script that can be run as part of your host's `build` command, which will generate a stand-alone app bundle and configure it to point to your remote server API.
+
+This example is for Vercel, and assumes:
+
+* A `BASE_HREF` environment variable to be set to `/`
+* A public (output) directory set to `build/dist`
+* A build command set to `npm run build` or `yarn build`
+* A `build` script defined in your package.json:
+    ```json
+    {
+      "scripts": {
+        "build": "ts-node compile.ts"
+      }
+    }
+    ```
+
+```TypeScript
+// compile.ts
+import { compileUiExtensions } from '@vendure/ui-devkit/compiler';
+import { DEFAULT_BASE_HREF } from '@vendure/ui-devkit/compiler/constants';
+import path from 'path';
+import { promises as fs } from 'fs';
+
+/**
+ * Compiles the Admin UI. If the BASE_HREF is defined, use that. 
+ * Otherwise, go back to the default admin route.
+ */
+compileUiExtensions({
+  outputPath: path.join(__dirname, 'build'),
+  baseHref: process.env.BASE_HREF ?? DEFAULT_BASE_HREF,
+  extensions: [
+      /* any UI extensions would go here, or leave empty */
+  ],
+})
+  .compile?.()
+  .then(() => {
+    // If building for Vercel deployment, replace the config to make 
+    // api calls to api.example.com instead of localhost.
+    if (process.env.VERCEL) {
+      console.log('Overwriting the vendure-ui-config.json for Vercel deployment.');
+      return fs.writeFile(
+        path.join(__dirname, 'build', 'dist', 'vendure-ui-config.json'),
+        JSON.stringify({
+          apiHost: 'https://api.example.com',
+          apiPort: '443',
+          adminApiPath: 'admin-api',
+          tokenMethod: 'cookie',
+          defaultLanguage: 'en',
+          availableLanguages: ['en', 'de'],
+          hideVendureBranding: false,
+          hideVersion: false,
+        }),
+      );
+    }
+  })
+  .then(() => {
+    process.exit(0);
+  });
+```