Create Application

The create command scaffolds a new UI Protocol application with all necessary configuration and dependencies.

Usage

# Interactive mode (recommended)
pnpm create akinon-app

# With project name
pnpm create akinon-app my-app

# With all options
pnpm create akinon-app my-app -- --type fullpage --package-manager pnpm --no-install

Options

Option	Alias	Description	Default
--type <type>	-t	Project type	(interactive)
--package-manager <manager>	-p	Package manager to use	pnpm
--no-install	-	Skip dependency installation	false
--debug	-d	Output extra debugging info	false

Project Types

fullpage

A standalone full-page application that takes over the entire content area of the shell.

pnpm create akinon-app my-app -- --type fullpage

Use cases:

• Dashboard applications

• Data management interfaces

• Complex multi-page applications

Generated structure:

my-app/
├── src/
│   ├── components/
│   ├── hooks/
│   ├── routes/
│   │   ├── __root.tsx
│   │   ├── index.tsx
│   │   └── about.tsx
│   ├── AppWrapper.tsx
│   ├── config.ts
│   ├── main.tsx
│   └── providers.tsx
├── public/
│   └── locales/
├── package.json
├── tsconfig.json
├── vite.config.ts
└── shell.config.js

plugin

A partial application that loads within a specific placeholder in the shell.

pnpm create akinon-app my-widget -- --type plugin

Use cases:

• Sidebar widgets

• Dashboard widgets

• Embedded components in other pages

Generated structure:

my-widget/
├── src/
│   ├── components/
│   │   └── Content.tsx
│   ├── App.tsx
│   ├── AppWrapper.tsx
│   ├── config.ts
│   ├── main.tsx
│   └── providers.tsx
├── public/
│   └── locales/
├── package.json
├── tsconfig.json
├── vite.config.ts
└── shell.config.js

multi-fullpage

Multiple full-page applications served from a single codebase with different base paths.

pnpm create akinon-app my-apps -- --type multi-fullpage

Use cases:

• Application suites

• Different views for different user roles

• Modular application architecture

multi-plugin

Multiple plugins served from a single codebase with different placeholder IDs.

pnpm create akinon-app my-widgets -- --type multi-plugin

Use cases:

• Widget libraries

• Multiple dashboard components

• Reusable plugin sets

Interactive Mode

When no options are provided, the CLI runs in interactive mode:

pnpm create akinon-app

Interactive prompts:

1. Project name - What is your project name?

2. Project type - Select a project type

3. Package manager - Which package manager would you like to use?

4. Install dependencies - Install dependencies?

Example Workflow

# Create a new fullpage application
$ pnpm create akinon-app

? What is your project name? order-management
? Select a project type: Fullpage App
? Which package manager would you like to use? pnpm (recommended)
? Install dependencies? Yes

Project Configuration:
   Name: order-management
   Type: Fullpage App
   Path: /Users/dev/projects/order-management
   Package Manager: pnpm
   Install: Yes

✔ Project created successfully!

Creating a new Akinon UI Protocol app in /Users/dev/projects/order-management.

Using pnpm.

Installing dependencies:
- @akinon/app-client
- @akinon/akilocale
- @akinon/akidate
- @akinon/ui-layout
- ...

✔ Dependencies installed

Success! Created order-management at /Users/dev/projects/order-management

Inside that directory, you can run several commands:

  pnpm dev
    Starts the development server.

  pnpm build
    Bundles the app for production.

  pnpm test
    Runs the test suite.

  pnpm shell
    Starts the development shell server.

We suggest that you begin by typing:

  cd order-management
  pnpm dev

After Creation

After creating your project:

# Navigate to project
cd my-app

# Start development server
pnpm dev

# Start shell server (in another terminal)
pnpm shell

Project Configuration

config.ts

Application configuration for the shell:

// Fullpage application
import type { FullpageApplicationConfig } from '@akinon/app-client';

export const config: Omit<FullpageApplicationConfig, 'navigation'> = {
  isDev: true,
  forceRedirect: true,
  menu: [
    { label: 'Home', path: '/' },
    { label: 'About', path: '/about' },
  ],
};

// Plugin application
import type { PluginApplicationConfig } from '@akinon/app-client';

export const config: PluginApplicationConfig = {
  isDev: true,
  forceRedirect: true,
  placeholderId: 'my-placeholder',
};

shell.config.js

Development shell configuration:

export default {
  apps: [
    {
      url: 'http://localhost:5173',
      path: '/my-app',
      name: 'My Application',
      type: 'full_page',
      navTitle: 'My App'
    }
  ],
  shell: {
    port: 4000,
    theme: 'omnitron',
    title: 'Development Shell'
  },
  sidebar: {
    items: [
      { key: 'my-app', label: 'My Application', icon: 'dashboard' }
    ]
  }
};

Next Steps

• Development Shell - Test your application

• Examples - See complete examples