Installation

Install Constela packages

Quick Start

The fastest way to start with Constela is using @constela/start, a full-stack meta-framework.

bash

npm install @constela/start

Project Setup

1. Create project structure

text

my-constela-app/
├── src/
│   └── routes/
│       └── index.json
├── package.json

2. Configure package.json

json

{
  "name": "my-constela-app",
  "type": "module",
  "scripts": {
    "dev": "constela-start dev",
    "build": "constela-start build",
    "start": "constela-start start"
  },
  "dependencies": {
    "@constela/start": "^1.2.23"
  }
}

3. Create your first page

Create src/routes/index.json:

json

{
  "version": "1.0",
  "route": {
    "path": "/"
  },
  "state": {
    "count": { "type": "number", "initial": 0 }
  },
  "actions": [
    {
      "name": "increment",
      "steps": [
        { "do": "update", "target": "count", "operation": "increment" }
      ]
    }
  ],
  "view": {
    "kind": "element",
    "tag": "div",
    "children": [
      {
        "kind": "element",
        "tag": "h1",
        "children": [
          { "kind": "text", "value": { "expr": "lit", "value": "Hello Constela!" } }
        ]
      },
      {
        "kind": "element",
        "tag": "p",
        "children": [
          { "kind": "text", "value": { "expr": "lit", "value": "Count: " } },
          { "kind": "text", "value": { "expr": "state", "name": "count" } }
        ]
      },
      {
        "kind": "element",
        "tag": "button",
        "props": {
          "onClick": { "event": "click", "action": "increment" }
        },
        "children": [
          { "kind": "text", "value": { "expr": "lit", "value": "Increment" } }
        ]
      }
    ]
  }
}

4. Start development server

bash

npm run dev

Open http://localhost:3000 to see your app.

File-Based Routing

Constela uses file-based routing. Files in src/routes/ automatically become routes:

File	Route
`index.json`	`/`
`about.json`	`/about`
`users/[id].json`	`/users/:id`
`docs/[...slug].json`	`/docs/*`

Package Overview

Note

Most users only need @constela/start. The other packages are used internally or for advanced use cases.

Package	Purpose
`@constela/start`	Full-stack meta-framework (recommended)
`@constela/core`	Type definitions and JSON validation
`@constela/compiler`	AST transformation
`@constela/runtime`	DOM renderer and state management
`@constela/router`	Client-side routing
`@constela/server`	Server-side rendering

CLI Commands

bash

# Development server with hot reload
constela-start dev --port 3000

# Production build
constela-start build --outDir dist

# Start production server
constela-start start --port 3000

Next Steps

Now that you have Constela installed, let's build your first app.