feat(create): Include Dashboard with new Vendure projects (#3862)

package-lock.json

@@ -5080,6 +5080,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -50502,6 +50503,21 @@
         }
       }
     },
+    "node_modules/wsl-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.1.0.tgz",
+      "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
+      "license": "MIT",
+      "dependencies": {
+        "is-wsl": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
@@ -51115,15 +51131,15 @@
       "version": "3.4.3",
       "license": "GPL-3.0-or-later",
       "dependencies": {
-        "@clack/prompts": "^0.7.0",
+        "@clack/prompts": "^0.11.0",
         "@vendure/common": "3.4.3",
-        "commander": "^11.0.0",
-        "cross-spawn": "^7.0.3",
+        "commander": "^14.0.1",
+        "cross-spawn": "^7.0.6",
         "fs-extra": "^11.2.0",
         "handlebars": "^4.7.8",
-        "open": "^8.4.2",
-        "picocolors": "^1.0.0",
-        "semver": "^7.5.4",
+        "open": "^10.2.0",
+        "picocolors": "^1.1.1",
+        "semver": "^7.7.2",
         "tcp-port-used": "^1.0.2"
       },
       "bin": {
@@ -51143,54 +51159,49 @@
         "url": "https://github.com/sponsors/michaelbromley"
       }
     },
-    "packages/create/node_modules/define-lazy-prop": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
-      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+    "packages/create/node_modules/@clack/core": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@clack/core/-/core-0.5.0.tgz",
+      "integrity": "sha512-p3y0FIOwaYRUPRcMO7+dlmLh8PSRcrjuTndsiA0WAFbWES0mLZlrjVoBRZ9DzkPFJZG6KGkJmoEAY0ZcVWTkow==",
       "license": "MIT",
-      "engines": {
-        "node": ">=8"
+      "dependencies": {
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
       }
     },
-    "packages/create/node_modules/is-docker": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
-      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
+    "packages/create/node_modules/@clack/prompts": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@clack/prompts/-/prompts-0.11.0.tgz",
+      "integrity": "sha512-pMN5FcrEw9hUkZA4f+zLlzivQSeQf5dRGJjSUbvVYDLvpKCdQx5OaknvKzgbtXOizhP+SJJJjqEbOe55uKKfAw==",
       "license": "MIT",
-      "bin": {
-        "is-docker": "cli.js"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
+      "dependencies": {
+        "@clack/core": "0.5.0",
+        "picocolors": "^1.0.0",
+        "sisteransi": "^1.0.5"
       }
     },
-    "packages/create/node_modules/is-wsl": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-      "integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
+    "packages/create/node_modules/commander": {
+      "version": "14.0.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-14.0.1.tgz",
+      "integrity": "sha512-2JkV3gUZUVrbNA+1sjBOYLsMZ5cEEl8GTFP2a4AVz5hvasAMCQ1D2l2le/cX+pV4N6ZU17zjUahLpIXRrnWL8A==",
       "license": "MIT",
-      "dependencies": {
-        "is-docker": "^2.0.0"
-      },
       "engines": {
-        "node": ">=8"
+        "node": ">=20"
       }
     },
     "packages/create/node_modules/open": {
-      "version": "8.4.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
-      "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-10.2.0.tgz",
+      "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
       "license": "MIT",
       "dependencies": {
-        "define-lazy-prop": "^2.0.0",
-        "is-docker": "^2.1.1",
-        "is-wsl": "^2.2.0"
+        "default-browser": "^5.2.1",
+        "define-lazy-prop": "^3.0.0",
+        "is-inside-container": "^1.0.0",
+        "wsl-utils": "^0.1.0"
       },
       "engines": {
-        "node": ">=12"
+        "node": ">=18"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"

packages/create/package.json

@@ -37,15 +37,15 @@
         "typescript": "5.8.2"
     },
     "dependencies": {
-        "@clack/prompts": "^0.7.0",
+        "@clack/prompts": "^0.11.0",
         "@vendure/common": "3.4.3",
-        "commander": "^11.0.0",
-        "cross-spawn": "^7.0.3",
+        "commander": "^14.0.1",
+        "cross-spawn": "^7.0.6",
         "fs-extra": "^11.2.0",
         "handlebars": "^4.7.8",
-        "open": "^8.4.2",
-        "picocolors": "^1.0.0",
-        "semver": "^7.5.4",
+        "open": "^10.2.0",
+        "picocolors": "^1.1.1",
+        "semver": "^7.7.2",
         "tcp-port-used": "^1.0.2"
     }
 }

packages/create/src/create-vendure-app.ts

@@ -234,6 +234,15 @@ export async function createVendureApp(
             .then(() => fs.ensureDir(path.join(root, 'src/plugins')))
             .then(() => fs.copyFile(assetPath('gitignore.template'), path.join(root, '.gitignore')))
             .then(() => fs.copyFile(assetPath('tsconfig.template.json'), path.join(root, 'tsconfig.json')))
+            .then(() =>
+                fs.copyFile(
+                    assetPath('tsconfig.dashboard.template.json'),
+                    path.join(root, 'tsconfig.dashboard.json'),
+                ),
+            )
+            .then(() =>
+                fs.copyFile(assetPath('vite.config.template.mts'), path.join(root, 'vite.config.mts')),
+            )
             .then(() => createDirectoryStructure(root))
             .then(() => copyEmailTemplates(root));
     } catch (e: any) {
@@ -305,7 +314,7 @@ export async function createVendureApp(
         const { populate } = await import(
             path.join(resolvePackageRootDir('@vendure/core'), 'cli', 'populate')
         );
-        const { bootstrap, DefaultLogger, LogLevel, JobQueueService, ConfigModule } = await import(
+        const { bootstrap, DefaultLogger, LogLevel, JobQueueService } = await import(
             path.join(resolvePackageRootDir('@vendure/core'), 'dist', 'index')
         );
         const { config } = await import(configFile);

packages/create/src/helpers.ts

@@ -218,8 +218,8 @@ export function getDependencies(
         `@vendure/core${vendurePkgVersion}`,
         `@vendure/email-plugin${vendurePkgVersion}`,
         `@vendure/asset-server-plugin${vendurePkgVersion}`,
-        `@vendure/admin-ui-plugin${vendurePkgVersion}`,
         `@vendure/graphiql-plugin${vendurePkgVersion}`,
+        `@vendure/dashboard${vendurePkgVersion}`,
         'dotenv',
         dbDriverPackage(dbType),
     ];

packages/create/templates/tsconfig.dashboard.template.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "jsx": "react-jsx",
+    "paths": {
+      // Import alias for the GraphQL types
+      // This corresponds to the location that you have set in your `vite.config.mts`
+      // resolve.alias property
+      "@/gql": ["./src/gql/graphql.ts"],
+      // This line allows TypeScript to properly resolve internal
+      // Vendure Dashboard imports, which is necessary for
+      // type safety in your dashboard extensions.
+      // This path assumes a root-level tsconfig.json file.
+      // You may need to adjust it if your project structure is different.
+      "@/vdb/*": ["./node_modules/@vendure/dashboard/src/lib/*"]
+    }
+  },
+  "include": ["src/plugins/**/dashboard/*", "src/gql/**/*.ts"]
+}

packages/create/templates/tsconfig.template.json

@@ -18,11 +18,15 @@
     "node_modules",
     "migration.ts",
     "src/plugins/**/ui/*",
-    "src/plugins/**/dashboard/*",
     "admin-ui",
+    "src/plugins/**/dashboard/*",
+    "src/gql/*",
     "vite.*.*ts"
   ],
   "ts-node": {
     "files": true
-  }
+  },
+  "references": [{
+    "path": "./tsconfig.dashboard.json"
+  }]
 }

packages/create/templates/vendure-config.hbs

@@ -7,7 +7,7 @@ import {
 } from '@vendure/core';
 import { defaultEmailHandlers, EmailPlugin, FileBasedTemplateLoader } from '@vendure/email-plugin';
 import { AssetServerPlugin } from '@vendure/asset-server-plugin';
-import { AdminUiPlugin } from '@vendure/admin-ui-plugin';
+import { DashboardPlugin } from '@vendure/dashboard/plugin';
 import { GraphiqlPlugin } from '@vendure/graphiql-plugin';
 import 'dotenv/config';
 import path from 'path';
@@ -98,12 +98,11 @@ export const config: VendureConfig = {
                 changeEmailAddressUrl: 'http://localhost:8080/verify-email-address-change'
             },
         }),
-        AdminUiPlugin.init({
-            route: 'admin',
-            port: serverPort + 2,
-            adminUiConfig: {
-                apiPort: serverPort,
-            },
+        DashboardPlugin.init({
+            route: 'dashboard',
+            appDir: IS_DEV
+                ? path.join(__dirname, 'dist/dashboard')
+                : path.join(__dirname, 'dashboard'),
         }),
     ],
 };

packages/create/templates/vite.config.template.mts

@@ -0,0 +1,34 @@
+import { vendureDashboardPlugin } from '@vendure/dashboard/vite';
+import { join, resolve } from 'path';
+import { pathToFileURL } from 'url';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    base: '/dashboard',
+    build: {
+        outDir: join(__dirname, 'dist/dashboard'),
+    },
+    plugins: [
+        vendureDashboardPlugin({
+            // The vendureDashboardPlugin will scan your configuration in order
+            // to find any plugins which have dashboard extensions, as well as
+            // to introspect the GraphQL schema based on any API extensions
+            // and custom fields that are configured.
+            vendureConfigPath: pathToFileURL('./src/vendure-config.ts'),
+            // Points to the location of your Vendure server.
+            api: { host: 'http://localhost', port: 3000 },
+            // When you start the Vite server, your Admin API schema will
+            // be introspected and the types will be generated in this location.
+            // These types can be used in your dashboard extensions to provide
+            // type safety when writing queries and mutations.
+            gqlOutputPath: './src/gql',
+        }),
+    ],
+    resolve: {
+        alias: {
+            // This allows all plugins to reference a shared set of
+            // GraphQL types.
+            '@/gql': resolve(__dirname, './src/gql/graphql.ts'),
+        },
+    },
+});

packages/dashboard/plugin/default-page.html

@@ -108,7 +108,7 @@
 </head>
 <body>
     <div class="container">
-        <svg viewBox="0 0 539 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg class="logo" viewBox="0 0 539 100" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="M198.715 29.7044C198.311 29.1369 197.638 28.7809 196.916 28.7809H189.317C188.393 28.7809 187.547 29.3774 187.239 30.2431L174.3 67.6252L161.16 30.2239C160.862 29.3581 160.034 28.7617 159.082 28.7617H151.261C150.54 28.7617 149.886 29.108 149.462 29.6852C149.058 30.2527 148.962 31.0031 149.183 31.6764L167.817 82.9974C168.115 83.8632 168.942 84.4404 169.866 84.4404H178.139C179.062 84.4404 179.889 83.8728 180.188 82.9974L198.927 31.6764C199.177 31.0031 199.081 30.2623 198.648 29.6852L198.696 29.714L198.715 29.7044Z" fill="#17C1FF"/>
             <path d="M252.778 58.3518C252.855 57.5342 252.903 56.4086 252.903 54.9465C252.903 49.7807 251.729 45.0286 249.43 40.8055C247.131 36.5825 243.88 33.1771 239.839 30.7145C235.77 28.2518 231.143 26.982 226.15 26.982C220.85 26.982 216.031 28.2711 211.836 30.8107C207.642 33.3503 204.343 36.9288 201.995 41.4212C199.667 45.8655 198.494 50.9639 198.494 56.553C198.494 62.142 199.696 67.2404 202.044 71.7135C204.42 76.2156 207.767 79.7941 211.99 82.3241C216.213 84.8636 221.081 86.1527 226.458 86.1527C232.23 86.1527 237.329 84.9887 241.619 82.6511C245.89 80.3135 249.392 77.0621 252.008 72.9834C252.633 71.9925 252.354 70.6746 251.383 70.0012L245.438 66.0476C244.938 65.7205 244.341 65.5955 243.735 65.7205C243.158 65.8456 242.639 66.2207 242.34 66.7113C240.792 69.299 238.695 71.3384 236.145 72.8006C233.596 74.2435 230.277 74.9842 226.256 74.9842C221.456 74.9842 217.791 73.4162 215.04 70.1648C212.644 67.327 211.163 64.0755 210.595 60.2469H250.613C251.739 60.2469 252.691 59.4004 252.787 58.2845V58.3326L252.778 58.3518ZM211.355 49.8288C212.25 46.7986 213.78 44.2397 215.925 42.0753C218.57 39.4395 221.899 38.1505 226.122 38.1505C230.345 38.1505 233.846 39.2664 236.318 41.5558C238.339 43.4413 239.791 46.231 240.59 49.8095H211.336L211.365 49.8384L211.355 49.8288Z" fill="#17C1FF"/>
             <path d="M305.417 36.6883C303.396 33.5042 300.645 31.0512 297.25 29.4062C293.931 27.819 290.227 26.9917 286.331 26.9917C282.108 26.9917 278.337 28.0114 275.086 30.0026C273.758 30.8203 272.537 31.7919 271.44 32.8885V30.9261C271.44 29.7333 270.468 28.7425 269.237 28.7425H261.743C260.541 28.7425 259.54 29.714 259.54 30.9261V82.2471C259.54 83.4399 260.512 84.4308 261.743 84.4308H269.237C270.439 84.4308 271.44 83.4592 271.44 82.2471V56.5722C271.44 50.7811 272.642 46.1348 275.009 42.8064C277.231 39.6704 280.559 38.1312 285.129 38.1312C292.978 38.1312 296.624 42.2773 296.624 51.2044V82.2471C296.624 83.4399 297.596 84.4308 298.827 84.4308H306.321C307.523 84.4308 308.524 83.4592 308.524 82.2471V47.9241C308.524 43.653 307.504 39.8724 305.503 36.6883H305.426H305.417Z" fill="#17C1FF"/>