Examples

Examples

Copy these configurations and adapt them to your project.

React + Node.js API

Full-stack application with frontend and backend.

devall.yaml

name: "My Full-Stack App"
emoji: "🚀"

services:
  - id: backend
    name: Backend API
    command: npm
    args: [run, dev]
    cwd: ./backend
    port: 3001
    autostart: true
    stealPort: true
    env:
      NODE_ENV: development
      DATABASE_URL: postgresql://localhost:5432/myapp

  - id: frontend
    name: React Frontend
    command: npm
    args: [start]
    cwd: ./frontend
    port: 3000
    autostart: true
    stealPort: true
    openBrowser: true
    env:
      REACT_APP_API_URL: http://localhost:3001

  - id: db
    name: PostgreSQL
    command: docker
    args: [run, --rm, -p, "5432:5432", -e, "POSTGRES_PASSWORD=password", postgres]
    port: 5432
    secondary: true  # Hide by default, toggle when needed

Next.js Application

Next.js with development server and build watching.

devall.jsonc

{
  "name": "Next.js App",
  "emoji": "⚡",
  "services": [
    {
      "id": "nextjs",
      "name": "Next.js Dev",
      "command": "npm",
      "args": ["run", "dev"],
      "port": 3000,
      "autostart": true,
      "stealPort": true,
      "openBrowser": true,
      "watchFiles": true,
      "env": {
        "NEXT_PUBLIC_API_URL": "http://localhost:3000/api"
      }
    },
    {
      "id": "storybook",
      "name": "Storybook",
      "command": "npm",
      "args": ["run", "storybook"],
      "port": 6006,
      "secondary": true, // Optional service
      "color": "#ff4785"
    }
  ]
}

Monorepo Setup

Multiple packages in a monorepo structure.

devall.yaml

name: "Monorepo Project"
emoji: "📦"

services:
  # Shared components package (watching for changes)
  - id: components
    name: Components
    command: npm
    args: [run, build:watch]
    cwd: ./packages/components
    autostart: true
    background: true  # Runs but doesn't show in UI

  # API package
  - id: api
    name: API Server
    command: npm
    args: [run, dev]
    cwd: ./packages/api
    port: 4000
    autostart: true
    stealPort: true
    env:
      PORT: 4000

  # Web application
  - id: web
    name: Web App
    command: npm
    args: [run, dev]
    cwd: ./packages/web
    port: 3000
    autostart: true
    stealPort: true
    openBrowser: true

  # Admin panel
  - id: admin
    name: Admin Panel
    command: npm
    args: [run, dev]
    cwd: ./packages/admin
    port: 3001
    secondary: true  # Start manually when needed

Microservices Architecture

Multiple services with different technologies.

devall.yaml

name: "Microservices Platform"
emoji: "🎯"

services:
  # API Gateway
  - id: gateway
    name: API Gateway
    command: node
    args: [server.js]
    cwd: ./services/gateway
    port: 8080
    autostart: true
    stealPort: true
    color: "#00ff00"

  # User Service (Node.js)
  - id: users
    name: User Service
    command: npm
    args: [start]
    cwd: ./services/users
    port: 3001
    autostart: true
    env:
      SERVICE_NAME: users
      PORT: 3001

  # Order Service (Python)
  - id: orders
    name: Order Service
    command: python
    args: [-u, app.py]  # -u for unbuffered output
    cwd: ./services/orders
    port: 3002
    autostart: true
    env:
      FLASK_ENV: development
      FLASK_PORT: 3002

  # Payment Service (Go)
  - id: payments
    name: Payment Service
    command: go
    args: [run, .]
    cwd: ./services/payments
    port: 3003
    autostart: true

  # Message Queue
  - id: redis
    name: Redis Queue
    command: redis-server
    port: 6379
    secondary: true
    color: "#dc382d"

Python Django Project

Django with Celery worker and Redis.

devall.yaml

name: "Django App"
emoji: "🐍"

services:
  - id: django
    name: Django Server
    command: python
    args: [manage.py, runserver, "0.0.0.0:8000"]
    port: 8000
    autostart: true
    stealPort: true
    openBrowser: true
    env:
      DJANGO_SETTINGS_MODULE: myproject.settings.dev
      PYTHONUNBUFFERED: "1"  # Ensure output isn't buffered

  - id: celery
    name: Celery Worker
    command: celery
    args: [-A, myproject, worker, -l, info]
    autostart: true
    env:
      DJANGO_SETTINGS_MODULE: myproject.settings.dev

  - id: redis
    name: Redis
    command: redis-server
    port: 6379
    secondary: true

  - id: tailwind
    name: Tailwind CSS
    command: npx
    args: [tailwindcss, -i, ./static/css/input.css, -o, ./static/css/output.css, --watch]
    watchFiles: false  # It has its own watcher
    secondary: true

Ruby on Rails

Rails with webpack and sidekiq.

{
  "name": "Rails App",
  "emoji": "💎",
  "services": [
    {
      "id": "rails",
      "name": "Rails Server",
      "command": "rails",
      "args": ["server", "-b", "0.0.0.0"],
      "port": 3000,
      "autostart": true,
      "stealPort": true,
      "openBrowser": true,
      "env": {
        "RAILS_ENV": "development"
      }
    },
    {
      "id": "webpack",
      "name": "Webpack Dev Server",
      "command": "bin/webpack-dev-server",
      "port": 3035,
      "autostart": true
    },
    {
      "id": "sidekiq",
      "name": "Sidekiq Worker",
      "command": "bundle",
      "args": ["exec", "sidekiq"],
      "autostart": true
    },
    {
      "id": "postgres",
      "name": "PostgreSQL",
      "command": "postgres",
      "args": ["-D", "/usr/local/var/postgres"],
      "port": 5432,
      "secondary": true
    }
  ]
}

Vite + Express

Modern frontend with Vite and Express API.

devall.yaml

name: "Vite + Express"
emoji: "⚡"

services:
  - id: api
    name: Express API
    command: nodemon
    args: [server.js]
    cwd: ./server
    port: 5000
    autostart: true
    stealPort: true
    env:
      NODE_ENV: development
      PORT: 5000

  - id: frontend
    name: Vite Frontend
    command: npm
    args: [run, dev, --, --host]
    cwd: ./client
    port: 5173
    autostart: true
    stealPort: true
    openBrowser: true
    env:
      VITE_API_URL: http://localhost:5000

  - id: terminal
    name: Terminal
    type: terminal  # Interactive terminal
    cwd: ./
    autostart: false
    secondary: true

Static Site Generator

Eleventy with live reload and asset processing.

devall.yaml

name: "Static Site"
emoji: "📄"

services:
  - id: eleventy
    name: Eleventy
    command: npx
    args: [@11ty/eleventy, --serve, --watch]
    port: 8080
    autostart: true
    openBrowser: true

  - id: sass
    name: Sass Compiler
    command: sass
    args: [--watch, src/styles:dist/styles]
    autostart: true
    background: true  # Runs silently

  - id: images
    name: Image Optimizer
    command: npm
    args: [run, watch:images]
    secondary: true

Testing Setup

Development with test watchers.

{
  "name": "TDD Project",
  "emoji": "🧪",
  "services": [
    {
      "id": "app",
      "name": "Application",
      "command": "npm",
      "args": ["run", "dev"],
      "port": 3000,
      "autostart": true,
      "stealPort": true
    },
    {
      "id": "test-unit",
      "name": "Unit Tests",
      "command": "npm",
      "args": ["run", "test:watch"],
      "autostart": true,
      "color": "#00ff00"
    },
    {
      "id": "test-e2e",
      "name": "E2E Tests",
      "command": "npm",
      "args": ["run", "cypress:open"],
      "secondary": true,
      "color": "#ff00ff"
    },
    {
      "id": "coverage",
      "name": "Coverage Server",
      "command": "npx",
      "args": ["serve", "coverage", "-p", "8888"],
      "port": 8888,
      "secondary": true
    }
  ]
}

Configuration Tips

Service Options

services:
  - id: unique-id           # Required: unique identifier
    name: Display Name      # Required: shown in UI
    command: npm           # Required: command to run
    args: [run, dev]       # Optional: command arguments
    cwd: ./path            # Optional: working directory
    port: 3000             # Optional: port number
    autostart: true        # Start automatically
    stealPort: true        # Kill processes on port
    openBrowser: true      # Open in browser when ready
    watchFiles: true       # Auto-restart on file changes
    secondary: true        # Hide by default
    background: true       # Run silently (no UI)
    autoInstall: true      # Auto-install npm packages
    color: "#ff0000"       # Custom color in UI
    icon: "server"         # Icon: server, globe, database, etc
    env:                   # Environment variables
      KEY: value

Terminal Services

For interactive terminals:

services:
  - id: terminal
    name: Terminal
    type: terminal        # Special type for terminals
    shell: zsh           # Optional: bash, zsh, fish, etc
    cwd: ./project       # Optional: starting directory
    autostart: false     # Usually start manually

Using .local Files

Keep personal settings separate:

# devall.yaml (committed to git)
services:
  - id: api
    name: API
    port: 3000

# devall.yaml.local (gitignored)
services:
  - id: api
    port: 8000  # Personal port preference
    env:
      DATABASE_URL: my-local-database

JavaScript Config

For dynamic configuration:

devall.config.js

import { defineConfig } from 'devall/config';

const isDev = process.env.NODE_ENV === 'development';

export default defineConfig({
  name: "Dynamic Config",
  services: [
    {
      id: 'api',
      name: 'API',
      command: 'npm',
      args: isDev ? ['run', 'dev'] : ['start'],
      port: process.env.PORT || 3000,
      autostart: true
    },
    // Conditionally add services
    ...(isDev ? [{
      id: 'storybook',
      name: 'Storybook',
      command: 'npm',
      args: ['run', 'storybook'],
      port: 6006,
      secondary: true
    }] : [])
  ]
});

Next Steps

• Copy a configuration that matches your stack
• Modify paths, ports, and commands for your project
• Save as devall.yaml in your project root
• Run npx devall to start

For more details, see the Configuration Guide.