Project Structure

ao-forge is a CLI tool that creates AO-powered applications with Next.js, Nuxt.js, React, Vue, and Svelte frameworks. If you are familiar with any of these frameworks, you will feel right at home.

Project Structure

The project structure varies by framework, but all include the AO configuration:

Next.js Projects

my-app/
├── README.md
├── package.json
├── ao.config.yml      # AO configuration file
├── tsconfig.json
├── next.config.js
├── tailwind.config.js
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── page.tsx
│   │   └── globals.css
│   └── ao/
│       └── *.lua
└── public/
    └── favicon.ico

Nuxt.js Projects

my-app/
├── README.md
├── package.json
├── ao.config.yml      # AO configuration file
├── tsconfig.json
├── nuxt.config.ts
├── tailwind.config.js
├── app.vue
├── ao/
│   └── *.lua
└── public/
    └── favicon.ico

React/Vue/Svelte Projects (Vite-based)

my-app/
├── README.md
├── package.json
├── ao.config.yml      # AO configuration file
├── tsconfig.json
├── vite.config.ts
├── tailwind.config.js
├── src/
│   ├── App.tsx      # React
│   ├── App.vue       # Vue
│   ├── App.svelte    # Svelte
│   ├── main.ts
│   └── ao/
│       └── *.lua
└── public/
    └── favicon.ico

Configuration (ao.config.yml)

# Project Settings
name: 'my-ao-app'
version: '1.0.0'
description: 'My AO-powered application'
framework: 'nextjs'       # nextjs, nuxtjs, react, vue, svelte
packageManager: 'pnpm'    # npm, yarn, or pnpm

# AO Process Configuration
luaFiles:                # Lua files to load
  - counter.lua
  - token.lua
autoStart: false         # Auto-start AO processes
processName: 'my-process' # Custom AO process name

# Development Configuration
ports:
  dev: 3000             # Development server port
  ao: 8080              # AO process port

# AOS Configuration
aos:
  version: '2.x'         # 1.x or 2.x
  features:
    coroutines: true     # Enable coroutines
    bootloader: false    # Enable bootloader
    weavedrive: false    # Enable WeaveDrive

Key Files and Directories

  • ao/ directory - Contains your Lua files for AO processes
  • ao.config.yml - AO configuration file for process management
  • tsconfig.json - TypeScript configuration
  • package.json - Node.js project configuration
  • Framework-specific files - Next.js, Nuxt.js, React, Vue, or Svelte configuration

Framework-Specific Features

Next.js Projects

  • Uses App Router structure (src/app/)
  • Includes next.config.js for Next.js configuration
  • Supports React Server Components

Nuxt.js Projects

  • Uses Vue 3 with Composition API
  • Includes nuxt.config.ts for Nuxt configuration
  • Supports auto-imports and modules

React/Vue/Svelte Projects

  • Uses Vite as the build tool
  • Includes vite.config.ts for Vite configuration
  • Supports hot module replacement

AO Integration

All frameworks include:

  • AO process management via ao-forge process commands
  • Lua file support in the ao/ directory
  • Configuration management via ao.config.yml
  • Development server with AO process integration

Read more about the ao-forge CLI and AO documentation

Table of Contents