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

Quick Start (No Installation)

Run DevAll directly with npx - always uses the latest version:

npm

npx devall

pnpm

pnpm dlx devall

yarn

yarn dlx devall

bun

bunx devall

Recommended: This approach ensures you always use the latest version without managing installations.

Global Installation

Install DevAll globally to use the devall command anywhere:

npm

npm install -g devall

pnpm

pnpm add -g devall

yarn

yarn global add devall

bun

bun add -g devall

Local Dev Dependency

For Javascript or Typescript projects, you can also setup DevAll as a development dependency in your project to keep things self-contained:

npm

npm install -D devall

Add to your package.json scripts:

{
  "scripts": {
    "devall": "devall"
  }
}

Run with:

npm run devall

Or directly:

npx devall

pnpm

pnpm add -D devall

Add to your package.json scripts:

{
  "scripts": {
    "devall": "devall"
  }
}

Run with:

pnpm devall

yarn

yarn add -D devall

Add to your package.json scripts:

{
  "scripts": {
    "devall": "devall"
  }
}

Run with:

yarn devall

bun

bun add -D devall

Add to your package.json scripts:

{
  "scripts": {
    "devall": "devall"
  }
}

Run with:

bun devall

Benefit: Adding DevAll to your npm scripts keeps it in your project’s node_modules without modifying your system PATH. Team members can simply run npm run devall without installing anything globally.

Your First Dashboard

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

npx

npx devall

Or specify a custom config file:

npx devall path/to/config.jsonc

npm

devall

Or specify a custom config file:

devall path/to/config.jsonc

pnpm

pnpm devall

Or specify a custom config file:

pnpm devall path/to/config.jsonc

yarn

yarn devall

Or specify a custom config file:

yarn devall path/to/config.jsonc

bun

bun devall

Or specify a custom config file:

bun devall path/to/config.jsonc

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

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

Basic React + Express Setup

The most common setup - a React frontend with an Express backend API:

devall.jsonc

{
  "name": "My React + Express App",
  "services": [
    {
      "id": "frontend",
      "name": "React",
      "command": "npm",
      "args": ["start"],
      "cwd": "./client",    // Frontend folder
      "port": 3000,
      "autostart": true,
      "openBrowser": true   // Opens browser when ready
    },
    {
      "id": "backend",
      "name": "Express API",
      "command": "npm",
      "args": ["run", "dev"],
      "cwd": "./server",    // Backend folder
      "port": 5000,
      "autostart": true,
      "stealPort": true,    // Kills any process on port 5000
      "env": {
        "NODE_ENV": "development",
        "DB_HOST": "localhost"
      }
    }
  ]
}

Next.js Full-Stack App

For Next.js apps with API routes:

{
  "name": "Next.js App",
  "services": [
    {
      "id": "nextjs",
      "name": "Next.js",
      "command": "npm",
      "args": ["run", "dev"],
      "port": 3000,
      "autostart": true,
      "openBrowser": true,
      "stealPort": true
    },
    {
      "id": "database",
      "name": "MongoDB",
      "command": "mongod",
      "args": ["--dbpath", "./data"],
      "port": 27017,
      "secondary": true   // Hide by default, toggle when needed
    }
  ]
}

Python + React

Mix different technologies easily:

{
  "name": "Python + React",
  "services": [
    {
      "id": "react",
      "name": "React Frontend",
      "command": "npm",
      "args": ["start"],
      "cwd": "./frontend",
      "port": 3000,
      "autostart": true
    },
    {
      "id": "flask",
      "name": "Flask API",
      "command": "python",
      "args": ["-u", "app.py"],  // -u for unbuffered output
      "cwd": "./backend",
      "port": 5000,
      "autostart": true,
      "env": {
        "FLASK_ENV": "development",
        "FLASK_DEBUG": "1"
      }
    }
  ]
}

Monorepo with Multiple Apps

{
  "name": "Monorepo",
  "services": [
    {
      "id": "shared",
      "name": "Shared Components",
      "command": "npm",
      "args": ["run", "build:watch"],
      "cwd": "./packages/shared",
      "autostart": true,
      "background": true    // Runs but doesn't show in UI
    },
    {
      "id": "web",
      "name": "Web App",
      "command": "npm",
      "args": ["run", "dev"],
      "cwd": "./apps/web",
      "port": 3000,
      "autostart": true
    },
    {
      "id": "admin",
      "name": "Admin Panel",
      "command": "npm",
      "args": ["run", "dev"],
      "cwd": "./apps/admin",
      "port": 3001,
      "secondary": true     // Start manually when needed
    }
  ]
}

Key Features

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
}

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

• Learn about advanced configuration options
• Set up MCP integration for AI assistants
• Explore the API reference

Need Help?

• Visit the website at dev-all.com
• Check out example configs in the GitHub repository
• Report issues on GitHub Issues
• View the npm package