Admin Panel

The Admin Panel is a React application that provides a user interface to manage your HonoHub project. The Admin Panel is built using React, Vite, and Tailwind CSS. But for using HonoHub, you don't need the dashboard. You can use the APIs directly, and use it as a headless CMS Solution or better create your own dashboard. But if you want to use the Admin Panel, here's how you can set it up.

Setting Up the Admin Panel

To set up the Admin Panel, you need to add the @honohub/react and @honohub/vite package to your project. You can do this by running the following command:

npm add @honohub/react react react-dom
npm add --save-dev @honohub/vite vite @vitejs/plugin-react

After adding the packages, you need to create a new file named vite.config.ts in the root of your project and add the following configuration:

import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import honohub from "@honohub/vite";
import hubConfig from "./hub.config";

export default defineConfig({
  plugins: [
    react(),
    honohub({
      config: hubConfig, // Your hub configuration
      basePath: "/", // Base path for the admin panel
    }),
  ],
});

We are using @rafty/ui as our component lib. Check out Rafty UI for more information.

Now add the following script to your package.json file:

{
  "scripts": {
    "vite": "vite",
    "vite:build": "vite build"
  }
}

You can now start the Admin Panel using the following command:

npm run vite

The Admin Panel will be available at http://localhost:5173. You can now start managing your HonoHub project using the Admin Panel.

Now one issue is that the API server is running on a different port (in this case on port 3000) or it could be deployed on a domain, So you will need to do the following:

Update you hub.config.ts file by adding serverUrl property to the config object.

const hubConfig = defineHub({
  // ...,
  serverUrl: "http://localhost:3000",
});

And you will need to enable CORS in your API server. You can do this by adding the following code to your API server:

import { cors } from "hono/cors";

const app = new Hono().use(cors()).route("/", createHub(hubConfig));

Your API Server and Admin Panel are now connected. You can now manage your HonoHub project using the Admin Panel.

You might think why we have taken an approach to separate the API server and the Admin Panel. The reason being so that you can keep developing and deloying your Hono app in the prefered runtime and serve the Admin Panel as a static site. This way you can deploy the Admin Panel to a CDN or serve it using serveStatic middleware in your API server.

const pathValidationRegex = /^\/[a-zA-Z0-9\/-]*(?<!\.[a-zA-Z0-9]+)$/;
app.use(
  "/*",
  serveStatic({
    root: "./apps/sandbox/dist",
    rewriteRequestPath: (path) => {
      const isPath = pathValidationRegex.test(path);

      if (isPath) return "/";
      return path;
    },
  })
);

Customizing the Admin Panel

The Admin Panel can be customized using plugins. You can create custom plugins to add new features, modify existing features, or improve the user experience. You can also customize the Admin Panel's appearance using Tailwind CSS. Or you can add custom panels using routes.

Add a route in your hub.config.ts file:

const hubConfig = defineHub({
  // ...,
  routes: [
    {
      label: "Home",
      path: "/",
      import: "./src/pages/Home",
    },
  ],
});

Now your component in src/pages/Home.tsx file will be available at / path. You can add more routes to create custom pages in the Admin Panel.

And you are not limited to React. Just add the necessary configuration to the vite.config.ts file and either add the routes in the hub.config.ts or add the generator property in the honohub vite plugin. It's a vite app, so you can use any plugin that is compatible with Vite.

• Use a different frontend framework like Vue, Solid, or Svelte.
• Use a different CSS framework like Chakra, MUI, or Bulma.
• Add custom routes and panels to the Admin Panel.

Go crazy!