Getting Started

Quickstart

Go from an empty project to a rendered admin page in five minutes, writing no Vue.

This is the five-minute path from an empty project to a rendered admin page. It stays deliberately minimal. Each step links to the reference doc that covers it in full.

This guide assumes the toolchain is installed — Node, the ajs CLI, MongoDB/Redis, and acms (Installation) — and that you already know AntelopeJS.

What you'll build

You'll build a project that loads the DMS, registers one page with a Form, and serves it through the shared Nuxt frontend.

Create the project skeleton

A project is a normal AntelopeJS project that loads the DMS as a dependency. The minimum layout:

my-app/

my-app/
  antelope.config.ts        # which modules to load (incl. the DMS)
  package.json
  src/
    index.ts                # imports your pages so their @RegisterPage decorators run
    pages/
      index.ts              # barrel file: re-imports every page in the folder
      welcome.ts            # the page you're about to write

The full layout and the dependency list live in Project setup.

A page is a class extending PageController, decorated with @RegisterPage(). Attach a Form (Forms) as a static field — every static field whose value is a component builder becomes a component on the page.

src/pages/welcome.ts

import {
  PageController,
  RegisterPage,
  pagesCategory,
} from "@antelopejs-private/cms/interfaces/cms/page";
import { Form } from "@antelopejs-private/cms/interfaces/cms-base/form";
import { DefaultDataTypes } from "@antelopejs-private/cms/interfaces/cms-base/data-types";
import { HttpMethod } from "@antelopejs-private/cms/interfaces/cms-base/types";

@RegisterPage()
export class WelcomePage extends PageController("welcome", {
  displayName: "Welcome",
  icon: "i-ph-house",
  category: pagesCategory,
}) {
  static form = Form({
    title: "Say hello",
    fields: [
      {
        id: "name",
        label: "Your name",
        type: new DefaultDataTypes.StringType({ placeholder: "Jane" }),
      },
    ],
    submitUrl: "/api/hello",
    submitUrlMethod: HttpMethod.post,
  });
}

Pages, components, and the routes that feed them are covered in Pages & components; the field types in Data types.

Register your pages

Your project is itself an AntelopeJS module. Its entry file only needs to import the pages so their @RegisterPage decorators run — the DMS renders them through its built-in dashboard frontend, so there is no frontend code to wire here. The src/pages/index.ts barrel file re-imports every page in the folder, so the entry file imports the folder once.

src/index.ts

import "./pages"; // side-effect: runs @RegisterPage so the dashboard lists your page

src/pages/index.ts

import "./welcome";

You add frontend code only when a screen needs a custom component the builders don't cover — an optional Nuxt layer, see Frontend layer. This quickstart needs none.

Configure the modules to load

The config declares which modules to load and their per-module config. The DMS needs an API module, a database, and auth-jwt. This is the trimmed version — the full stack is in Project setup.

antelope.config.ts

import { defineConfig } from "@antelopejs/interface-core/config";

export default defineConfig({
  name: "my-app",
  modules: {
    local: {
      source: {
        type: "local",
        path: ".",
        watchDir: ["src"],
        installCommand: ["npm install", "npx tsc"],
        reloadCommand: "npx tsc",
      },
      config: {},
    },
    "@antelopejs-private/cms": {
      source: { type: "package", package: "@antelopejs-private/cms", version: "0.2.0" },
      config: {
        apiBaseUrl: "http://localhost:5010",
        clientBaseUrl: "http://localhost:3001",
      },
    },
    // …plus @antelopejs/api, mongodb, auth-jwt — see Project setup.
  },
});

Run both processes

The backend and frontend are two coupled processes. Start the backend first, wait until it's ready, then start the frontend.

Terminal 1 — backend (AntelopeJS)

ajs project dev -w
# ready when it prints: Server started, listening on http://localhost:5010

Terminal 2 — frontend (cms-nuxt loader)

acms dev
# point it at the backend with -b http://localhost:5010 or set CMS_BACKEND_URL
# ready when it prints: Local: http://localhost:3001/

Open http://localhost:3001, find Welcome in the sidebar, and the form renders.

Where to go next

Tutorial

Chain schema, tables, relations, dashboard, and roles in one build.

Architecture

Understand why a backend edit changes the UI.

Built-in dashboard

Everything the DMS ships before you write a page.

Project setup

The full project setup and module stack.

Pages & components

Tables, charts, more components, and the routes that feed them.

Auth & permissions

Protect the page and define permissions.

Installation

Everything to install before your first DMS page — Node, the ajs CLI, a database and Redis, and the acms frontend loader.