DEV Community: Arthur Vidmar

Generate Node.js Admin Panel using Kottster

Arthur Vidmar — Tue, 11 Feb 2025 16:12:38 +0000

Kottster is an open-source tool for building a Node.js admin panel on top of your database. It's built on top of the full-stack framework that uses Node.js and React.

Kottster allows you to easily generate pages to view and manage data in your database tables. Here’s an example of a typical page like this in Kottster:

The main feature of Kottster is that you can create pages just by defining a simple configuration for the features you need.

For example, let's say we want to create a page to view data from the couriers table in a database. Our users should be able to search, sort, and filter the data. We also want to allow adding new couriers, as well as editing or deleting existing ones.

Normally, this would require setting up a backend with an API, building a frontend, and integrating it with the API.

But with Kottster, we can create this page using a simple configuration:

export default action = app.defineTableController(dataSource, {
  table: 'couriers',
  primaryKeyColumn: 'id',
  select: {
    pageSize: 16,
    searchableColumns: ["first_name", "last_name", "email"],
    sortableColumns: ["created_at"],
    filterableColumns: ["id"]
  },
  insert: true,
  update: true,
  delete: false
});

Users will be able to search within the specified searchableColumns, sort data based on the sortableColumns, and filter using the filterableColumns. Each option here defines how the table behaves.

Instead of spending time coding basic CRUD endpoints and building an admin panel interface, you can focus on developing your product.

The best part is that while you can create pages manually, you don’t have to. Kottster includes a built-in page generator that can analyze any table in your database, including its columns and relationships. It does this in literally seconds—and without using any LLM.

You can learn more about features Kottster has on our website or check out the live demo to see the type of admin panel you can build.

How to get started

To get started, create a new project using the following command:

npx @kottster/cli new

Make sure you have Node.js (v20 or higher) installed.

It will ask you a few questions, such as the project name, whether to use JavaScript or TypeScript, and which package manager to use.

Once the installation is complete, go to the created project folder and run the command npm run dev to start the project locally (default: http://localhost:5480).

Open the server URL in your browser. You’ll see an authentication page where you can create an account. After that, you’ll be able to create an app by specifying its name:

Clicking “Create” will initialize your project locally and log you into it.

Connect your database

After creating an app, you’ll land on the Getting Started page, where you can easily connect your database:

There, you can choose the database you want to connect to and either enter its credentials directly or generate a file to specify them manually.

Since the app is self-hosted, Kottster doesn’t store or access your database credentials, so you don’t need to worry about privacy concerns.

Generate pages

Once your database is connected, you can start creating pages.

Click the "Add Page" button in the sidebar, and a modal will appear where you can specify the page title and choose its content type:

Empty – Creates a blank page with no content.
Table – Generates a table page like the one shown earlier, allowing you to view and manage data from any database table in a convenient way.
Table with custom SQL query – Generates a table page with a sample SQL query to extract data from your database.
Table with custom fetch – Generates a table page that retrieves data from a sample API.
Custom page – Creates an example page with a custom controller. It generates a backend response and a client-side component that fetches and displays the data.

If you choose "Table" as the page content and select a database table, Kottster will analyze the table—including its columns and relationships—and generate the most suitable page for it.

The page will be created in the ./app/routes directory, and a new navigation item will be added to the sidebar automatically.

You can customize any generated page as needed, adding custom components or business logic to fit your needs.

How to deploy

The Kottster app you build is essentially a Remix app running on a Node.js server, which can be deployed anywhere, including popular cloud providers.

You can learn more about this by reading our guide on deploying Kottster to production.

Also, here’s a great article on where to host your Remix app: https://www.jacobparis.com/content/where-to-host-remix

To learn more, visit the Kottster documentation or check out the source code on GitHub.

Thank you for reading!

Create an Admin Panel for your project in 5 minutes

Arthur Vidmar — Tue, 17 Dec 2024 16:52:31 +0000

Kottster is a free tool to help developers quickly build and deploy admin panels. In just 5 minutes, you can generate a fully functional Node.js admin panel, deploy it to the cloud, and share it with your team.

When you build apps with Kottster, they are full-stack and run on React and Node.js.

In this article, I'll show you how to create a Kottster app, connect it to your database, generate pages for specific tables, and host it anywhere.

Creating a project

Before you begin, make sure Node.js (v20 or higher) is installed on your machine.

To create a new project, run this command:

npx @kottster/cli new

You’ll be asked for a project name, whether you want to use JavaScript or TypeScript, and which package manager to use. After that, a new project folder will be created with everything you need to get started.

To start the app locally, open the created folder and run npm run dev:

When the app loads, you'll see the login page. Click “Create an account” to sign up on Kottster. After signing up, enter a name for your app and click “Create app”. This will create your app and log you in.

Once everything is set up, you’ll see the “Getting started” page:

Connect your database

On the Getting Started page, choose your database type, enter the connection details, and click “Connect”.

This will install the necessary packages and create a file with a data source connected to your database in your project folder.

Please notice that with your app being self-hosted, your credentials always remain private, and the Kottster tool doesn’t have access to your database.

Generate pages

After connecting your database, you'll see the “Generate pages” tab:

This page helps you quickly create pages to view or manage data from your database tables.

If you enable “Allow insert” or “Allow update”, forms for adding and updating records will be available. Enabling “Allow delete” will add the ability to delete records.

Once you've made your selections, click "Generate pages". The tool will automatically generate the page files and update the sidebar menu with new items.

How pages work

Each page in your admin panel is located in the app/routes directory. These pages are essentially Remix routes that serve as both the UI and API, and you can customize them however you like.

Each page file in the Kottster app should export a React component with page content.

When you generate a page for a specific database table, it will include the following:

A Remix action that calls the defineTableController function. This function controls the table's behavior and enables its features.
A <Table> component, which is closely tied to the defineTableController settings defined in the action.

Example of a generated page for the "users" table:

import { TablePage } from '@kottster/react';
import { app } from '@/.server/app';
import dataSource from '@/.server/data-sources/mysql';

// Sets up table RPC settings for the "users" table
export const action = app.defineTableController(dataSource, {
  table: 'users',               
  primaryKeyColumn: 'id',       
  select: {
    pageSize: 16,               
  },
  insert: false,                 
  update: false,                 
  delete: false,
});

// Returns the page with the table component inside
export default () => (
  <TablePage />
);

You can learn more about defineTableController and the <TablePage /> component in our documentation. I also recommend learning more about Remix and its Fullstack Data Flow in their official documentation.

Deployment

When you're ready, you can deploy your Kottster app to make it available online. Before deploying, ensure the app is properly built and free of errors.

To do this, build your app locally by running npm run build:

If there are no errors, your app is ready to go live. Since it's self-hosted, you can deploy it anywhere you like. Learn more about deployment options here.

Deploying to Vercel for free

In this article, I'll cover one of the most popular free options: deploying a Kottster app to Vercel.

Start by signing up for an account at vercel.com if you don't already have one. Once logged in, click "New Project" and connect your repository containing the app you built.

After selecting your repository, click "Deploy". In just a few moments, your app will be live on a free Vercel domain.

Once your app is live, you can open it and log in to your account.

That's it! Your admin panel is now available online.

You can now share it with your team. To do this, click "Manage accesses" in the left sidebar of your app. This will open a page where you can set up access for other users by entering their email addresses.

Final notes

You can learn more about Kottster on our website: kottster.app

If you have any questions or need help, check out our documentation, visit our GitHub repository, or join our Discord community to ask questions and share your feedback.

Thanks for reading, and good luck with your project!