Stand-alone Admin UI Deployment

[michaelbromley]

Sharing this thread from Slack, in case anyone else is searching for this solution:

Q: Is it possible to develop and deploy admin-ui separately from main project (avoiding admin-ui-plugin)?

A: Yes, it should be possible to do this by building a stand-alone version using ui devkit.

A: Absolutely. We are doing this as a separate package. The build command just runs the following script and we deploy it on vercel:

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 Angular admin. If the BASE_HREF is defined, use that. Otherwise, go back to the default /admin route.
 */
compileUiExtensions({
  outputPath: path.join(__dirname, 'built'),
  baseHref: process.env.BASE_HREF ?? DEFAULT_BASE_HREF,
  extensions: [
    {
      translations: {
        mk: path.join(__dirname, './translations/mk.json'),
      },
    },
  ],
})
  .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, 'built', 'dist', 'vendure-ui-config.json'),
        JSON.stringify({
          apiHost: 'https://api.example.com/',
          apiPort: '443',
          adminApiPath: 'admin-api',
          tokenMethod: 'cookie',
          defaultLanguage: 'mk',
          availableLanguages: ['mk'],
          hideVendureBranding: true,
          hideVersion: false,
        }),
      );
    } else {
      return Promise.resolve();
    }
  })
  .then(() => {
    process.exit(0);
  });