Skip to content
DevAll

Getting Started

DevAll is a unified development dashboard that helps you manage multiple services, processes, and development tools from one interface. This guide will walk you through installation and your first project setup.

Installation

Section titled “Installation”

Install DevAll globally via npm:

Terminal window
npm install -g devall

Or use it directly with npx:

Terminal window
npx devall

Your First Dashboard

Section titled “Your First Dashboard”

1. Create a Configuration File

Section titled “1. Create a Configuration File”

DevAll uses JSONC (JSON with comments) for configuration. Create a devall.jsonc file in your project root:

{
  "dashboard": {
    "port": 7777,
    "open": true
  },
  "services": [
    {
      "name": "Frontend",
      "command": "npm",
      "args": ["run", "dev"],
      "cwd": "./frontend",
      "port": 3000,
      "autostart": true,
      "watchFiles": true
    },
    {
      "name": "Backend API",
      "command": "npm",
      "args": ["run", "dev"],
      "cwd": "./backend",
      "port": 8080,
      "autostart": true,
      "stealPort": true
    }
  ]
}

2. Start the Dashboard

Section titled “2. Start the Dashboard”
Terminal window
devall

Or specify a custom config file:

Terminal window
devall path/to/config.jsonc

3. Access the Dashboard

Section titled “3. Access the Dashboard”

DevAll will automatically open your browser to http://localhost:7777 (or your configured port). You’ll see:

  • Service Cards: Each configured service with status indicators
  • Live Logs: Real-time stdout/stderr output
  • Control Buttons: Start, stop, and restart services
  • System Resources: Monitor CPU, memory, and more

Configuration Priority

Section titled “Configuration Priority”

DevAll supports multiple configuration files with the following priority (highest first):

  1. devall.local.jsonc (gitignored by convention)
  2. devall.local.json
  3. devall.json
  4. devall.jsonc

This allows you to have team-wide settings in devall.jsonc and personal overrides in devall.local.jsonc.

Common Configurations

Section titled “Common Configurations”

Node.js Backend + React Frontend

Section titled “Node.js Backend + React Frontend”
{
  "services": [
    {
      "name": "React App",
      "command": "npm",
      "args": ["start"],
      "port": 3000,
      "autostart": true
    },
    {
      "name": "Node API",
      "command": "node",
      "args": ["server.js"],
      "port": 8080,
      "autostart": true,
      "watchFiles": true
    }
  ]
}

Microservices Architecture

Section titled “Microservices Architecture”
{
  "services": [
    {
      "name": "Auth Service",
      "command": "npm",
      "args": ["run", "dev"],
      "cwd": "./services/auth",
      "port": 3001,
      "autostart": true
    },
    {
      "name": "User Service",
      "command": "npm",
      "args": ["run", "dev"],
      "cwd": "./services/users",
      "port": 3002,
      "autostart": true
    },
    {
      "name": "API Gateway",
      "command": "npm",
      "args": ["run", "dev"],
      "cwd": "./gateway",
      "port": 8080,
      "autostart": true
    }
  ]
}

With Background Services

Section titled “With Background Services”
{
  "services": [
    {
      "name": "Frontend",
      "command": "npm",
      "args": ["run", "dev"],
      "port": 3000,
      "autostart": true
    },
    {
      "name": "Redis",
      "command": "redis-server",
      "port": 6379,
      "autostart": true,
      "background": true  // Runs silently, not shown in UI
    },
    {
      "name": "PostgreSQL",
      "command": "postgres",
      "args": ["-D", "data"],
      "port": 5432,
      "secondary": true,  // Hidden by default, show via toggle
      "autostart": true
    }
  ]
}

Key Features

Section titled “Key Features”

Automatic Port Management

Section titled “Automatic Port Management”

Set stealPort: true to automatically kill processes occupying your service’s port before starting:

{
  "name": "Development Server",
  "command": "npm",
  "args": ["run", "dev"],
  "port": 3000,
  "stealPort": true  // Reclaim port 3000 if occupied
}

File Watching

Section titled “File Watching”

DevAll watches for file changes and automatically restarts services (unless watchFiles: false):

  • Monitors src/, lib/, *.js, *.json by default
  • Detects nodemon restarts automatically
  • Supports custom watch patterns

Smart Status Detection

Section titled “Smart Status Detection”

DevAll parses your service output to detect when it’s actually ready:

  • ✅ “Server running on…”
  • ✅ “Listening on port…”
  • ✅ “Ready on http://localhost:…”
  • ⚠️ “app crashed - waiting for file changes”

Next Steps

Section titled “Next Steps”

Need Help?

Section titled “Need Help?”