|
|
@@ -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);
|
|
|
+ });
|
|
|
+```
|