I want to be able to use a subdomain and main route to use the Admin UI

[Caryntjen]

Is your feature request related to a problem? Please describe.
Currently there is no easy way to use admin.website.com without a lot of workaround.

The problems is due to this line of code:

vendure/packages/admin-ui-plugin/src/plugin.ts

Line 330 in f02fc56

`<base href="/${baseHref}/" />`,

Arthur Nester was able to fix that by extending plugin ui but got a new issue Http failure during parsing as I understood it caused by createStaticServer method so i added new middleware and fix issue with white screen but still doesn't work as expected

Describe the solution you'd like
Easily add a subdomain and use basehref /

Describe alternatives you've considered

The solution on Discord suggested was by Arthur Nester:

class ExtendedAdminUiPlugin extends AdminUiPlugin {
  static init(options: any) {
    AdminUiPlugin.init(options);
    return ExtendedAdminUiPlugin;
  }
  async configure(consumer: MiddlewareConsumer) {
    await super.configure(consumer);
    if (!IS_DEV) {
      await super.configure(consumer);
      // @ts-ignore
      consumer.apply(this.serveUiApp(AdminUiPlugin.options.app)).forRoutes("/");
      await this.fixBaseHref();
    }
  }

  private serveUiApp(app: any) {
    const adminUiAppPath = (app && app.path) || this.defaultAppPath;
    const ignoredRoutes = ["/shop-api", "/admin-api", "/assets", "/health"];
    const adminUiServer = express.Router();
    adminUiServer.use(express.static(adminUiAppPath));
    adminUiServer.use((req, res, next) => {
      if (ignoredRoutes.some((route) => req.path.startsWith(route))) {
        next();
      } else {
        res.sendFile(path.join(adminUiAppPath, "index.html"));
      }
    });
    return adminUiServer;
  }
  get defaultAppPath() {
    return path.join(__dirname, "../admin-ui");
  }
  private async fixBaseHref() {
    // @ts-ignore
    const { app } = AdminUiPlugin.options;
    const defaultPath = this.defaultAppPath;
    const adminUiAppPath = (app && app.path) || defaultPath;
    const indexHtmlPath = path.join(adminUiAppPath, "index.html");

    try {
      const indexHtmlContent = await fs.readFile(indexHtmlPath, "utf-8");
      const baseTagRegex = /<base[^>]*href=['"]([^'"]+)['"][^>]*>/i;
      const baseTagMatch = indexHtmlContent.match(baseTagRegex);
      if (baseTagMatch) {
        const currentHref = baseTagMatch[1];

        if (currentHref.startsWith("//")) {
          const indexWithFixedBase = indexHtmlContent.replace(
            baseTagRegex,
            '<base href="/" />'
          );
          await fs.writeFile(indexHtmlPath, indexWithFixedBase, "utf-8");
        }
      }
    } catch (e) {
      console.error("ExtendedAdminUiPlugin.fixBaseHref error", e);
    }
  }
}

 ExtendedAdminUiPlugin.init({
      route: "admin",
      port: 3002,
      app: adminApp,
    }),

route is still pointing to admin because internal middleware uses this to apply middleware for that route and if we put / we won't override so we use / in extended plugin for additional middleware with ignored some routes.

I hope it will be helpful, i know that my solution is not good and i am tend to deploy admin as separate service in order to avoid overriding core plugins logic

Additional context
On Northflank I got my domain working and the admin UI goes to /admin but I want to change that to go to the root location.

So the subdomain is linked with server and port 3000.

I did change the following settings:

        AdminUiPlugin.init({
            route: '/',
            port: 3002,
        })

and in the angular.json:

"baseHref": "/",
Additionally I also use some custom components so I have an environment variable:

BASE_HREF=/
used in compile-admin-ui.ts
baseHref: process.env.BASE_HREF ?? DEFAULT_BASE_HREF,

[dlhck]

Could be done together with #2903