feat(medusa,dashboard,admin-sdk): Run admin dashboard from Medusa instance (#7330)

2024-05-15 19:52:09 +02:00
parent ec5415ea1a
commit 490586f566
82 changed files with 3946 additions and 788 deletions
@@ -0,0 +1,111 @@
+import path from "path"
+import { Config } from "tailwindcss"
+import type { InlineConfig } from "vite"
+import { nodePolyfills } from "vite-plugin-node-polyfills"
+
+import { BundlerOptions } from "../types"
+
+export async function getViteConfig(
+  options: BundlerOptions
+): Promise<InlineConfig> {
+  const { searchForWorkspaceRoot } = await import("vite")
+  const { default: react } = await import("@vitejs/plugin-react")
+  const { default: inject } = await import("@medusajs/admin-vite-plugin")
+
+  const getPort = await import("get-port")
+  const hmrPort = await getPort.default()
+
+  const root = path.resolve(__dirname, "./")
+
+  return {
+    root: path.resolve(__dirname, "./"),
+    base: options.path,
+    build: {
+      emptyOutDir: true,
+      outDir: path.resolve(process.cwd(), options.outDir),
+    },
+    optimizeDeps: {
+      include: ["@medusajs/dashboard", "react-dom/client"],
+    },
+    define: {
+      __BASE__: JSON.stringify(options.path),
+      /**
+       * TODO: Accept backend url from config to support hosting the admin elsewhere.
+       * The empty string should be the default value, as that ensures that requests
+       * are made to the server that serves the admin dashboard.
+       */
+      __BACKEND_URL__: JSON.stringify(""),
+    },
+    server: {
+      open: true,
+      fs: {
+        allow: [
+          searchForWorkspaceRoot(process.cwd()),
+          path.resolve(__dirname, "../../medusa"),
+          path.resolve(__dirname, "../../app"),
+        ],
+      },
+      hmr: {
+        port: hmrPort,
+      },
+      middlewareMode: true,
+    },
+    css: {
+      postcss: {
+        plugins: [
+          require("tailwindcss")({
+            config: createTailwindConfig(root),
+          }),
+        ],
+      },
+    },
+    /**
+     * TODO: Remove polyfills, they are currently only required for the
+     * `axios` dependency in the dashboard. Once we have the new SDK,
+     * we should remove this, and leave it up to the user to include
+     * polyfills if they need them.
+     */
+    plugins: [
+      react(),
+      inject(),
+      nodePolyfills({
+        include: ["crypto", "util", "stream"],
+      }),
+    ],
+  }
+}
+
+function createTailwindConfig(entry: string) {
+  const root = path.join(entry, "**/*.{js,ts,jsx,tsx}")
+  const html = path.join(entry, "index.html")
+
+  let dashboard = ""
+
+  try {
+    dashboard = path.join(
+      path.dirname(require.resolve("@medusajs/dashboard")),
+      "**/*.{js,ts,jsx,tsx}"
+    )
+  } catch (_e) {
+    // ignore
+  }
+
+  let ui: string = ""
+
+  try {
+    ui = path.join(
+      path.dirname(require.resolve("@medusajs/ui")),
+      "**/*.{js,ts,jsx,tsx}"
+    )
+  } catch (_e) {
+    // ignore
+  }
+
+  const config: Config = {
+    presets: [require("@medusajs/ui-preset")],
+    content: [html, root, dashboard, ui],
+    darkMode: "class",
+  }
+
+  return config
+}