First Project

Let's create your first AO-powered application step by step.

Prerequisites

Before you begin, make sure you have:

  • Node.js 18+ installed
  • AOS CLI installed (npm i -g https://get_ao.g8way.io)
  • ao-forge CLI installed (npm install -g ao-forge)

Step 1: Create a New Project

# Create a new project (interactive mode)
ao-forge init my-first-ao-app

# Or specify the framework explicitly
ao-forge init my-first-ao-app --framework nextjs
ao-forge init my-first-ao-app --framework nuxtjs
ao-forge init my-first-ao-app --framework react
ao-forge init my-first-ao-app --framework vue
ao-forge init my-first-ao-app --framework svelte

This will create a new directory with a framework-specific structure:

Next.js Project Structure

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

React/Vue/Svelte Project Structure

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

Step 2: Explore the Project Structure

The generated project includes:

  • ao.config.yml - Configuration file for AO processes
  • ao/ or src/ao/ - Directory containing your Lua files
  • counter.lua - A sample AO process

Step 3: Start Development

cd my-first-ao-app

# Start the development server
ao-forge dev

# Start AO processes separately
ao-forge process start

Step 4: View Your Application

Open your browser and navigate to http://localhost:3000. You should see your AO-powered application running!

Next Steps

Table of Contents