feat(admin): Improve DX for deploying admin externally (#3418)

* init deploy command

* add include flag

* add 'shortcut' flag

* add dev command, fix var replacement, change default behaviour

* cleanup params of build command

* fix defaults when using the plugin to serve admin

* add changeset

* fix globals

* update README

* throw error on no build found

---------

Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>

packages/admin-ui/src/utils/format-base.ts

@@ -1,5 +1,9 @@
 import { Base } from "../types"
 
-export const formatBase = <T extends string>(base: T): Base<T> => {
+export const formatBase = <T extends string>(base?: T): Base<T> => {
+  if (!base) {
+    return undefined
+  }
+
   return `/${base}/`
 }

packages/admin-ui/src/utils/get-custom-vite-config.ts

@@ -10,9 +10,7 @@ export const getCustomViteConfig = (config: AdminBuildConfig): InlineConfig => {
   const uiPath = resolve(__dirname, "..", "..", "ui")
 
   const globalReplacements = () => {
-    const base = globals.base || "app"
-
-    let backend = "/"
+    let backend = undefined
 
     if (globals.backend) {
       try {
@@ -26,10 +24,12 @@ export const getCustomViteConfig = (config: AdminBuildConfig): InlineConfig => {
       }
     }
 
-    return {
-      __BASE__: JSON.stringify(`/${base}`),
-      __MEDUSA_BACKEND_URL__: JSON.stringify(backend),
-    }
+    const global = {}
+
+    global["__BASE__"] = JSON.stringify(globals.base ? `/${globals.base}` : "/")
+    global["__MEDUSA_BACKEND_URL__"] = JSON.stringify(backend ? backend : "/")
+
+    return global
   }
 
   const buildConfig = (): BuildOptions => {
@@ -41,7 +41,7 @@ export const getCustomViteConfig = (config: AdminBuildConfig): InlineConfig => {
       /**
        * Default build directory is at the root of the `@medusajs/admin-ui` package.
        */
-      destDir = resolve(__dirname, "..", "..", "build")
+      destDir = resolve(process.cwd(), "build")
     } else {
       /**
        * If a custom build directory is specified, it is resolved relative to the

packages/admin-ui/src/utils/get-custom-vite-dev-config.ts

@@ -0,0 +1,24 @@
+import react from "@vitejs/plugin-react"
+import { resolve } from "path"
+import { InlineConfig } from "vite"
+import { AdminDevConfig } from "../types/dev"
+
+export const getCustomViteDevConfig = ({
+  backend = "http://localhost:9000",
+  port = 7001,
+}: AdminDevConfig): InlineConfig => {
+  const uiPath = resolve(__dirname, "..", "..", "ui")
+
+  return {
+    define: {
+      __BASE__: JSON.stringify("/"),
+      __MEDUSA_BACKEND_URL__: JSON.stringify(backend),
+    },
+    plugins: [react()],
+    root: uiPath,
+    mode: "development",
+    server: {
+      port,
+    },
+  }
+}

packages/admin-ui/src/utils/index.ts

@@ -1,2 +1,3 @@
 export * from "./format-base"
 export * from "./get-custom-vite-config"
+export * from "./get-custom-vite-dev-config"