Recipes

Recipes

Ready-to-use DevAll configurations. Copy, paste, customize.

Frontend + Backend

Create React App + Express

name: "CRA + Express"
services:
  - id: frontend
    name: React
    command: npm
    args: [start]
    cwd: ./client
    port: 3000
    autostart: true
    openBrowser: true
    env:
      REACT_APP_API_URL: http://localhost:5000

  - id: backend
    name: Express
    command: npm
    args: [run, dev]
    cwd: ./server
    port: 5000
    autostart: true
    stealPort: true

Vite + Fastify

name: "Vite + Fastify"
services:
  - id: frontend
    name: Vite
    command: npm
    args: [run, dev]
    cwd: ./frontend
    port: 5173
    autostart: true
    openBrowser: true

  - id: backend
    name: Fastify
    command: npm
    args: [run, dev]
    cwd: ./backend
    port: 3000
    autostart: true

Angular + NestJS

name: "Angular + Nest"
services:
  - id: angular
    name: Angular
    command: ng
    args: [serve]
    cwd: ./frontend
    port: 4200
    autostart: true

  - id: nestjs
    name: NestJS
    command: npm
    args: [run, start:dev]
    cwd: ./backend
    port: 3000
    autostart: true

Full-Stack Frameworks

Next.js with Everything

name: "Next.js Full"
services:
  - id: next
    name: Next.js
    command: npm
    args: [run, dev]
    port: 3000
    autostart: true
    openBrowser: true

  - id: prisma
    name: Prisma Studio
    command: npx
    args: [prisma, studio]
    port: 5555
    secondary: true

  - id: mailhog
    name: Mail Server
    command: mailhog
    port: 8025
    secondary: true

Remix Run

name: "Remix App"
services:
  - id: remix
    name: Remix
    command: npm
    args: [run, dev]
    port: 3000
    autostart: true
    stealPort: true
    openBrowser: true

SvelteKit

name: "SvelteKit"
services:
  - id: sveltekit
    name: SvelteKit
    command: npm
    args: [run, dev]
    port: 5173
    autostart: true
    openBrowser: true

Mobile Development

React Native + Metro

name: "React Native"
services:
  - id: metro
    name: Metro Bundler
    command: npx
    args: [react-native, start]
    port: 8081
    autostart: true

  - id: api
    name: API Server
    command: npm
    args: [run, dev]
    cwd: ./backend
    port: 3000
    autostart: true

  - id: ios
    name: iOS Simulator
    command: npx
    args: [react-native, run-ios]
    secondary: true

Flutter

name: "Flutter App"
services:
  - id: flutter
    name: Flutter Web
    command: flutter
    args: [run, -d, chrome]
    port: 5000
    autostart: true

  - id: api
    name: Backend API
    command: npm
    args: [run, dev]
    cwd: ./backend
    port: 3000
    autostart: true

Databases & Services

With PostgreSQL

name: "App + Postgres"
services:
  - id: app
    name: Application
    command: npm
    args: [run, dev]
    port: 3000
    autostart: true
    env:
      DATABASE_URL: postgresql://user:pass@localhost:5432/mydb

  - id: postgres
    name: PostgreSQL
    command: postgres
    args: [-D, ./data/postgres]
    port: 5432
    secondary: true

With MongoDB

name: "App + MongoDB"
services:
  - id: app
    name: Application
    command: npm
    args: [run, dev]
    port: 3000
    autostart: true
    env:
      MONGODB_URI: mongodb://localhost:27017/myapp

  - id: mongo
    name: MongoDB
    command: mongod
    args: [--dbpath, ./data/mongo]
    port: 27017
    secondary: true

With Redis

name: "App + Redis"
services:
  - id: app
    name: Application
    command: npm
    args: [run, dev]
    port: 3000
    autostart: true

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

  - id: redis-commander
    name: Redis UI
    command: redis-commander
    port: 8081
    secondary: true

Testing & QA

With Test Runners

name: "TDD Setup"
services:
  - id: app
    name: Application
    command: npm
    args: [run, dev]
    port: 3000
    autostart: true

  - id: test-watch
    name: Tests
    command: npm
    args: [run, test:watch]
    autostart: true
    color: "#00ff00"

  - id: cypress
    name: E2E Tests
    command: npx
    args: [cypress, open]
    secondary: true

With Storybook

name: "Component Dev"
services:
  - id: storybook
    name: Storybook
    command: npm
    args: [run, storybook]
    port: 6006
    autostart: true
    openBrowser: true

  - id: app
    name: Main App
    command: npm
    args: [run, dev]
    port: 3000
    secondary: true

Microservices

Basic Microservices

name: "Microservices"
services:
  - id: gateway
    name: API Gateway
    command: npm
    args: [run, dev]
    cwd: ./gateway
    port: 8080
    autostart: true

  - id: auth
    name: Auth Service
    command: npm
    args: [run, dev]
    cwd: ./services/auth
    port: 3001
    autostart: true

  - id: users
    name: User Service
    command: npm
    args: [run, dev]
    cwd: ./services/users
    port: 3002
    autostart: true

  - id: products
    name: Product Service
    command: npm
    args: [run, dev]
    cwd: ./services/products
    port: 3003
    autostart: true

Static Sites

Gatsby

name: "Gatsby Site"
services:
  - id: gatsby
    name: Gatsby
    command: npm
    args: [run, develop]
    port: 8000
    autostart: true
    openBrowser: true

  - id: graphql
    name: GraphQL Explorer
    command: npm
    args: [run, develop]
    port: 8000
    secondary: true

Hugo

name: "Hugo Site"
services:
  - id: hugo
    name: Hugo Server
    command: hugo
    args: [server, -D]
    port: 1313
    autostart: true
    openBrowser: true

Backend Only

Express API Server

name: "Express API"
services:
  - id: api
    name: API
    command: npm
    args: [run, dev]
    port: 3000
    autostart: true
    stealPort: true
    env:
      NODE_ENV: development
      PORT: 3000

  - id: terminal
    name: Terminal
    type: terminal
    cwd: ./
    secondary: true

Python FastAPI

name: "FastAPI"
services:
  - id: api
    name: FastAPI
    command: uvicorn
    args: [main:app, --reload, --port, "8000"]
    port: 8000
    autostart: true
    env:
      PYTHONUNBUFFERED: "1"

  - id: worker
    name: Background Worker
    command: python
    args: [worker.py]
    autostart: true
    secondary: true

Tips

Port Management

Always use stealPort: true for services that might have zombie processes:

stealPort: true  # Kills anything on the port before starting

Environment Variables

Keep secrets in .env files, reference them in config:

env:
  API_KEY: ${API_KEY}  # Reads from .env file
  NODE_ENV: development

Secondary Services

Use secondary: true for services you don’t always need:

secondary: true  # Hidden by default, toggle to show

Background Services

Use background: true for services that should run silently:

background: true  # Runs but doesn't show in UI

Auto-start Order

Services start in the order they’re defined. Put databases first:

services:
  - id: db        # Starts first
  - id: api       # Starts second
  - id: frontend  # Starts third

---

Need a different setup? Check the Examples or create your own!