Guides

Building Admin Pages

Intermediate~12 min

Build admin entrypoints with the current scaffolded Vite + React flow and the @meteorack/modules-sdk-ui barrel.

Prerequisites

  • A module scaffold with a src/pages entry file and assets/vite.config.ts.
  • Node and pnpm available for the module asset build.
  • A declared admin entrypoint in module.json.

What You Will Finish With

  • Wire a module admin page into the runtime entrypoint system.
  • Use the public @meteorack/modules-sdk-ui surface for layout and actions.
  • Build the entry file with the scaffolded Vite config against WordPress React globals.

Build admin entrypoints with the current scaffolded Vite + React flow and the @meteorack/modules-sdk-ui barrel.

Declare the admin entrypoint

Use entrypoints.admin in module.json so the runtime knows which admin entrypoints your module ships.

{
  "slug": "dashboard",
  "entrypoints": {
    "admin": ["dashboard"]
  }
}

Main React page

The scaffolded MainPage template uses the public @meteorack/modules-sdk-ui barrel for layout and UI primitives.

import React from 'react';
import { PageHeader, Card, Button } from '@meteorack/modules-sdk-ui';

export function MainPage() {
  return (
    <>
      <PageHeader
        title="Dashboard"
        description="Module overview and controls"
      />
      <Card>
        <Button variant="primary">Run action</Button>
      </Card>
    </>
  );
}

Vite config

The scaffolded Vite config builds the module React entry against the WordPress-provided React globals.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: '../dist',
    rollupOptions: {
      input: '../src/pages/MainPage.tsx',
      external: ['react', 'react-dom', '@wordpress/element'],
      output: {
        globals: {
          react: 'window.wp.element',
          'react-dom': 'window.wp.element',
          '@wordpress/element': 'window.wp.element',
        },
        entryFileNames: 'js/[name].js',
      },
    },
  },
});