Custom Scripts

Custom Scripts

Advanced script customization and manual configuration.

Manual Script Creation

Instead of using the wizard or plus button, you can manually create scripts:

Basic Mirror Script

{
  "scripts": {
    "dev": "vite",
    "dev:mirror": "concurrently \"npx devmirror-cli\" \"npm run dev\""
  }
}

With Custom Configuration

{
  "scripts": {
    "dev:mirror": "npx devmirror-cli --config=custom.config.json && npm run dev"
  }
}

Sequential Execution

{
  "scripts": {
    "dev:mirror": "npm run build && npx devmirror-cli & npm run serve"
  }
}

Script Patterns

Pre/Post Hooks

{
  "scripts": {
    "premirror": "echo 'Starting DevMirror...'",
    "mirror": "npx devmirror-cli",
    "postmirror": "echo 'DevMirror started'"
  }
}

Conditional Scripts

{
  "scripts": {
    "dev": "NODE_ENV=development npm run dev:mirror || npm run dev:normal",
    "dev:mirror": "npx devmirror-cli & npm run dev:normal",
    "dev:normal": "vite"
  }
}

Platform-Specific

{
  "scripts": {
    "dev:mirror": "npm run dev:mirror:os",
    "dev:mirror:os": "run-script-os",
    "dev:mirror:win32": "npx devmirror-cli & npm run dev",
    "dev:mirror:darwin:linux": "npx devmirror-cli & npm run dev"
  }
}

Environment Variables in Scripts

Note: Environment variables only work with devmirror-companion. The main CLI uses config files.

For Companion Script

{
  "scripts": {
    "dev:mirror": "DEVMIRROR_OUTPUT=./logs npx devmirror-companion"
  }
}

Cross-Platform with cross-env

{
  "scripts": {
    "dev:mirror": "cross-env DEVMIRROR_CEF_PORT=8555 npx devmirror-companion"
  }
}

Using .env Files

{
  "scripts": {
    "dev:mirror": "dotenv -e .env.development npx devmirror-companion"
  }
}

Complex Script Examples

Multi-Service Development

{
  "scripts": {
    "dev:all": "npm run dev:frontend & npm run dev:backend & npm run dev:mirror",
    "dev:frontend": "cd frontend && npm start",
    "dev:backend": "cd backend && npm start",
    "dev:mirror": "npx devmirror-cli --config multi.config.json"
  }
}

Build and Watch

{
  "scripts": {
    "dev:mirror": "npm run build:watch & npx devmirror-cli",
    "build:watch": "webpack --watch"
  }
}

Test with Coverage

{
  "scripts": {
    "test:mirror": "npx devmirror-cli & jest --coverage"
  }
}

Script Functions

Delay Start

{
  "scripts": {
    "dev:mirror": "sleep 2 && npx devmirror-cli & npm run dev"
  }
}

Retry Logic

{
  "scripts": {
    "dev:mirror": "until npx devmirror-cli; do sleep 1; done & npm run dev"
  }
}

Port Detection

{
  "scripts": {
    "dev:mirror": "wait-on tcp:3000 && npx devmirror-cli || npm run dev"
  }
}

Custom Script Files

Node.js Script

scripts/run-with-mirror.js:

const { spawn } = require('child_process');
const config = require('../devmirror.config.json');

// Start DevMirror
const mirror = spawn('npx', ['devmirror-cli'], {
  stdio: 'inherit',
  env: { ...process.env, DEVMIRROR_CONFIG: JSON.stringify(config) }
});

// Start dev server after delay
setTimeout(() => {
  spawn('npm', ['run', 'dev'], { stdio: 'inherit' });
}, 2000);

Shell Script

scripts/dev-mirror.sh:

#!/bin/bash

# Check if port is available
if lsof -Pi :9222 -sTCP:LISTEN -t >/dev/null ; then
    echo "Port 9222 is already in use"
    exit 1
fi

# Start DevMirror in background
npx devmirror-cli &
MIRROR_PID=$!

# Start dev server
npm run dev

# Cleanup on exit
trap "kill $MIRROR_PID" EXIT

PowerShell Script

scripts/dev-mirror.ps1:

# Start DevMirror
Start-Process -NoNewWindow -FilePath "npx" -ArgumentList "devmirror-cli"

# Wait for port
Start-Sleep -Seconds 2

# Start dev server
npm run dev

Dynamic Configuration

Based on Branch

{
  "scripts": {
    "dev:mirror": "node -e \"require('./scripts/mirror-config.js')()\" && npm run dev"
  }
}

scripts/mirror-config.js:

const fs = require('fs');
const path = require('path');

module.exports = function() {
  const branch = require('child_process')
    .execSync('git branch --show-current')
    .toString().trim();

  const configs = {
    main: { url: 'http://localhost:3000' },
    develop: { url: 'http://localhost:3001' },
    feature: { url: 'http://localhost:3002' }
  };

  const branchConfig = configs[branch] || configs.develop;

  // Write dynamic config file
  fs.writeFileSync(
    path.join(__dirname, '..', 'devmirror.config.json'),
    JSON.stringify({ ...branchConfig, outputDir: './devmirror-logs', mode: 'cdp' }, null, 2)
  );
};

Script Composition

Using npm-run-all

{
  "scripts": {
    "dev:mirror": "run-p mirror dev",
    "mirror": "npx devmirror-cli",
    "dev": "vite"
  }
}

Using concurrently with names

{
  "scripts": {
    "dev:mirror": "concurrently -n MIRROR,APP \"npx devmirror-cli\" \"npm run dev\""
  }
}

Using parallel execution

{
  "scripts": {
    "dev:mirror": "npm-run-all --parallel mirror dev",
    "mirror": "npx devmirror-cli",
    "dev": "vite"
  }
}

Error Handling

Fallback Scripts

{
  "scripts": {
    "dev:safe": "npm run dev:mirror || npm run dev",
    "dev:mirror": "npx devmirror-cli && npm run dev",
    "dev": "vite"
  }
}

Error Recovery

{
  "scripts": {
    "dev:mirror": "npx devmirror-cli || (echo 'DevMirror failed, continuing...' && npm run dev)"
  }
}

Performance Scripts

Memory Limits

{
  "scripts": {
    "dev:mirror": "node --max-old-space-size=4096 node_modules/.bin/devmirror-cli"
  }
}

CPU Priority

{
  "scripts": {
    "dev:mirror": "nice -n 10 npx devmirror-cli & npm run dev"
  }
}

Debugging Scripts

VS Code Output Debug

{
  "scripts": {
    "dev:mirror:debug": "npx devmirror-cli"
  }
}

Note: Check VS Code Output panel (DevMirror channel) for debugging information.

With Node Inspector

{
  "scripts": {
    "dev:mirror:inspect": "node --inspect node_modules/.bin/devmirror-cli"
  }
}

Best Practices

1. Keep scripts simple - Complex logic belongs in separate files
2. Use descriptive names - dev:mirror is clearer than dm
3. Document custom scripts in your README
4. Test scripts on all target platforms
5. Use environment variables for configuration
6. Handle errors gracefully with fallbacks
7. Clean up processes on exit

Common Patterns Summary

Pattern	Script	Use Case
Simple	concurrently "npx devmirror-cli" "npm run dev"	Most projects
Sequential	npm run build && npx devmirror-cli	Build first
Conditional	[ -z "$CI" ] && npm run dev:mirror	Skip in CI
Fallback	npm run dev:mirror \|\| npm run dev	Optional DevMirror

Important: The companion script (devmirror-companion) exists but is not exposed as a CLI command. The background script referenced by the wizard (scripts/devmirror-background.js) is not automatically created. These are known issues.