Building Admin Apps

mkdir my-admin-app
cd my-admin-app
npm init -y
npm install @shopware-ag/meteor-admin-sdk vue vite

my-admin-app/
├── src/
│   ├── frontend/
│   │   ├── main.ts          # Entry point
│   │   ├── init/
│   │   │   └── init-app.ts  # Extension registration
│   │   └── locations/
│   │       └── init-locations.ts  # Location rendering
│   └── server.ts            # Development server
├── package.json
└── tsconfig.json

import { location } from '@shopware-ag/meteor-admin-sdk';

if (location.is(location.MAIN_HIDDEN)) {
    /**
     * This gets executed in the administration in a hidden iframe.
     * Register all extension points here.
     */
    import('./init/init-app');
} else {
    /**
     * This gets executed when the administration renders a location.
     * Render the appropriate view based on the location.
     */
    import('./locations/init-locations');
}

import { ui, notification } from '@shopware-ag/meteor-admin-sdk';

// Add a menu item
ui.menu.addMenuItem({
    label: 'My Custom App',
    locationId: 'my-app-main-page',
    displaySearchBar: true,
});

// Add a card to an existing page
ui.componentSection.add({
    component: 'card',
    positionId: 'sw-product-detail__before',
    props: {
        title: 'My Custom Card',
        subtitle: 'Additional product information',
        locationId: 'my-app-product-card'
    }
});

// Add an action button
ui.actionButton.add({
    name: 'my-action-button',
    label: 'Custom Action',
    entity: 'product',
    view: 'list',
    callback: (entity, entityIdList) => {
        notification.dispatch({
            title: `Action triggered for ${entity}`,
            message: `Selected IDs: ${entityIdList.join(', ')}`,
            variant: 'success'
        });
    }
});

import { createApp, h, defineAsyncComponent } from 'vue';
import { location } from '@shopware-ag/meteor-admin-sdk';
import '@shopware-ag/meteor-component-library/styles.css';

// Register components for each location
const locations = {
    'my-app-main-page': defineAsyncComponent(
        () => import('./views/MainPage.vue')
    ),
    'my-app-product-card': defineAsyncComponent(
        () => import('./views/ProductCard.vue')
    ),
};

const app = createApp({
    render: () => h(locations[location.get()])
});

app.mount('#app');

import express from 'express';
import { createServer as createViteServer } from 'vite';

const app = express();
const port = 3000;

async function startServer() {
    const vite = await createViteServer({
        server: { middlewareMode: true },
        appType: 'custom'
    });

    app.use(vite.middlewares);

    app.listen(port, () => {
        console.log(`Server running at http://localhost:${port}`);
    });
}

startServer();