Deployment

The Vendure Dashboard offers flexible deployment options. You can either serve it directly through your Vendure Server using the DashboardPlugin, or host it independently as a static site.

Deployment Options

Option 1: Serve with DashboardPlugin

The DashboardPlugin integrates seamlessly with your Vendure Server by:

Serving the React dashboard as static files
Handling routing for the dashboard UI
Providing a unified deployment experience

Option 2: Standalone Hosting

The Vendure Dashboard can be hosted independently as a static site, since the build produces standard web assets (index.html, CSS, and JS files). This approach offers maximum flexibility for deployment on any static hosting service.

Serving with DashboardPlugin

To configure the DashboardPlugin, follow these steps:

1. Configure Vite Base Path

Update your vite.config.mts to set the base path where the dashboard will be served:

vite.config.mts

import { vendureDashboardPlugin } from '@vendure/dashboard/vite';import { join, resolve } from 'path';import { pathToFileURL } from 'url';import { defineConfig } from 'vite';export default defineConfig({    base: '/dashboard', // [!code highlight]    build: {        outDir: join(import.meta.dirname, 'dist/dashboard'), // [!code highlight]    },    plugins: [        vendureDashboardPlugin({            vendureConfigPath: pathToFileURL('./src/vendure-config.ts'),            // When served by DashboardPlugin in production, the dashboard can            // derive the API URL from the same origin that served the app.            api: process.env.NODE_ENV === 'production'                ? { host: 'auto', port: 'auto' }                : { host: 'http://localhost', port: 3000 },            gqlOutputPath: './src/gql',        }),    ],    resolve: {        alias: {            '@/gql': resolve(import.meta.dirname, './src/gql/graphql.ts'),        },    },});

2. Add DashboardPlugin to Vendure Config

Add the DashboardPlugin to your vendure-config.ts:

src/vendure-config.ts

import { VendureConfig } from '@vendure/core';import { DashboardPlugin } from '@vendure/dashboard/plugin';import path from 'path';const IS_DEV = process.env.APP_ENV === 'dev';export const config: VendureConfig = {    // ... other config    plugins: [        // ... other plugins        DashboardPlugin.init({            // Important: This must match the base path from vite.config.mts (without slashes) // [!code highlight]            route: 'dashboard', // [!code highlight]            // Path to the Vite build output directory            appDir: IS_DEV                ? path.join(__dirname, '../dist/dashboard')                : path.join(__dirname, 'dashboard'), // [!code highlight]        }),    ],};

Deployment Options

Option 1: Serve with DashboardPlugin

The DashboardPlugin integrates seamlessly with your Vendure Server by:

Serving the React dashboard as static files

Handling routing for the dashboard UI

Providing a unified deployment experience

Option 2: Standalone Hosting

Serving with DashboardPlugin

To configure the DashboardPlugin, follow these steps:

1. Configure Vite Base Path

Update your vite.config.mts to set the base path where the dashboard will be served:

vite.config.mts

import { vendureDashboardPlugin } from '@vendure/dashboard/vite';import { join, resolve } from 'path';import { pathToFileURL } from 'url';import { defineConfig } from 'vite';export default defineConfig({    base: '/dashboard', // [!code highlight]    build: {        outDir: join(import.meta.dirname, 'dist/dashboard'), // [!code highlight]    },    plugins: [        vendureDashboardPlugin({            vendureConfigPath: pathToFileURL('./src/vendure-config.ts'),            // When served by DashboardPlugin in production, the dashboard can            // derive the API URL from the same origin that served the app.            api: process.env.NODE_ENV === 'production'                ? { host: 'auto', port: 'auto' }                : { host: 'http://localhost', port: 3000 },            gqlOutputPath: './src/gql',        }),    ],    resolve: {        alias: {            '@/gql': resolve(import.meta.dirname, './src/gql/graphql.ts'),        },    },});

2. Add DashboardPlugin to Vendure Config

Add the DashboardPlugin to your vendure-config.ts:

src/vendure-config.ts

import { VendureConfig } from '@vendure/core';import { DashboardPlugin } from '@vendure/dashboard/plugin';import path from 'path';const IS_DEV = process.env.APP_ENV === 'dev';export const config: VendureConfig = {    // ... other config    plugins: [        // ... other plugins        DashboardPlugin.init({            // Important: This must match the base path from vite.config.mts (without slashes) // [!code highlight]            route: 'dashboard', // [!code highlight]            // Path to the Vite build output directory            appDir: IS_DEV                ? path.join(__dirname, '../dist/dashboard')                : path.join(__dirname, 'dashboard'), // [!code highlight]        }),    ],};

Option	Type	Description
`route`	`string`	The URL path where the dashboard will be served (must match Vite's base path)
`appDir`	`string`	Path to the directory containing the built dashboard files

Deployment

Deployment Options

Option 1: Serve with DashboardPlugin

Option 2: Standalone Hosting

Serving with DashboardPlugin

1. Configure Vite Base Path

2. Add DashboardPlugin to Vendure Config

Deployment

Deployment Options

Option 1: Serve with DashboardPlugin

Option 2: Standalone Hosting

Serving with DashboardPlugin

1. Configure Vite Base Path

2. Add DashboardPlugin to Vendure Config

Building for Production

Vendure Platform catalog

Accessing the Dashboard

Configuration Options

DashboardPlugin Options

Best Practices

Example Deployment Script

Standalone Hosting

Configuration

Build and Deploy

CORS Configuration

Troubleshooting

Dashboard Not Loading (DashboardPlugin)

404 Errors on Dashboard Routes

Connection Issues (Standalone)