Development Setup - arilonUK/iotagentmesh GitHub Wiki

Development Setup

This guide provides comprehensive instructions for setting up a local development environment for IoT Agent Mesh.

Prerequisites

Required Software

Tool Version Purpose
Node.js 18.x LTS or higher JavaScript runtime
npm 9.x or higher Package manager
Git Latest Version control

IDE Configuration

VS Code Setup

Recommended Extensions

{
  "recommendations": [
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-typescript-next",
    "esbenp.prettier-vscode",
    "ms-vscode.vscode-eslint",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense",
    "ms-vscode.vscode-json"
  ]
}

VS Code Settings

Create .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "emmet.includeLanguages": {
    "typescript": "html",
    "typescriptreact": "html"
  },
  "tailwindCSS.experimental.classRegex": [
    "clsx\\(([^)]*)\\)",
    "cn\\(([^)]*)\\)"
  ]
}

VS Code Snippets

Create .vscode/snippets.json for common patterns:

{
  "React Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:ComponentName}Props {",
      "  $2",
      "}",
      "",
      "export function ${1:ComponentName}({ $3 }: ${1:ComponentName}Props) {",
      "  return (",
      "    <div>$4</div>",
      "  );",
      "}"
    ],
    "description": "Create a React functional component"
  }
}

Development Tools Integration

ESLint Configuration

The project includes a comprehensive ESLint configuration:

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier'
  ],
  rules: {
    // Custom rules for consistency
    'react/react-in-jsx-scope': 'off',
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    'prefer-const': 'error'
  }
};

Prettier Configuration

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

Testing Setup

Running Tests

# Run all tests
npm run test

Run tests in watch mode


npm run test:watch


Run tests with coverage


npm run test:coverage


Run specific test file


npm run test -- ComponentName.test.tsx

Writing Tests

Example test structure:

// components/Button.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from './Button';

describe('Button Component', () => {
it('renders with correct text', () => {
render(<Button>Click me</Button>);
expect(screen.getByText('Click me')).toBeInTheDocument();
});


it('handles click events',
# Development Setup

This guide provides comprehensive instructions for setting up a local development environment for IoT Agent Mesh.

Prerequisites

Required Software

Tool Version Purpose
Node.js 18.x LTS or higher JavaScript runtime
npm 9.x or higher Package manager
Git Latest Version control

Optional but Recommended

Tool Purpose
VS Code Primary IDE with excellent TypeScript support
GitHub CLI Enhanced GitHub integration
Docker Container-based development (optional)

Supabase Account Setup

  1. Create Supabase Account: Visit [supabase.com](https://supabase.com) and sign up
  2. Create New Project: Initialize a new Supabase project
  3. Note Credentials: Save your project URL and anon key

Local Development Setup

1. Repository Setup

# Clone the repository
git clone https://github.com/arilonUK/iotagentmesh.git
cd iotagentmesh

# Verify Node.js version
node --version  # Should be 18.x or higher
npm --version   # Should be 9.x or higher

2. Dependency Installation

# Install project dependencies
npm install

# Verify installation
npm ls --depth=0

3. Environment Configuration

# Copy environment template
cp .env.example .env

# Edit environment variables
# Use your preferred editor (nano, vim, vs code, etc.)
code .env

Environment Variables Configuration

# .env file configuration

# Supabase Configuration
VITE_SUPABASE_URL=https://your-project-id.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key-here

# Application Configuration
VITE_APP_NAME="IoT Agent Mesh"
VITE_APP_VERSION="1.0.0"

# Development Settings
VITE_DEV_MODE=true
VITE_LOG_LEVEL=debug

# External Services (Optional)
VITE_WEBHOOK_URL=http://localhost:3000/api/webhooks
VITE_API_BASE_URL=http://localhost:3000/api

Finding Your Supabase Credentials

  1. Go to your Supabase dashboard
  2. Navigate to Settings → API
  3. Copy the Project URL and anon/public key
  4. Paste them into your .env file

4. Database Setup

Option A: Using Supabase Dashboard (Recommended for beginners)

  1. Navigate to your Supabase project dashboard
  2. Go to SQL Editor
  3. Copy and execute the initialization scripts from supabase/migrations/

Option B: Using Supabase CLI (Advanced)

# Install Supabase CLI
npm install -g supabase

# Login to Supabase
supabase login

# Link to your project
supabase link --project-ref your-project-id

# Run migrations
supabase db push

# Start local Supabase (optional for offline development)
supabase start

5. Development Server

# Start the development server
npm run dev

# Server will start at http://localhost:5173
# Hot reload is enabled by default

6. Verify Installation

Open your browser and navigate to http://localhost:5173. You should see:

  • ✅ Application loads without errors
  • ✅ Authentication system is functional
  • ✅ Database connection is established
  • ✅ Real-time features are working

Development Workflow

Daily Development Routine

# 1. Pull latest changes
git pull origin main

# 2. Install any new dependencies
npm install

# 3. Start development server
npm run dev

# 4. Make your changes...

# 5. Run tests
npm run test

# 6. Check code quality
npm run lint
npm run type-check

# 7. Commit changes
git add .
git commit -m "Your commit message"
git push origin your-branch

Available Scripts

Script Purpose Command
dev Start development server npm run dev
build Build for production npm run build
preview Preview production build npm run preview
test Run test suite npm run test
test:watch Run tests in watch mode npm run test:watch
lint Run ESLint npm run lint
lint:fix Fix ESLint issues npm run lint:fix
type-check TypeScript type checking npm run type-check
format Format code with Prettier npm run format

IDE Configuration

VS Code Setup

Recommended Extensions

{
  "recommendations": [
    "bradlc.vscode-tailwindcss",
    "ms-vscode.vscode-typescript-next",
    "esbenp.prettier-vscode",
    "ms-vscode.vscode-eslint",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense",
    "ms-vscode.vscode-json"
  ]
}

VS Code Settings

Create .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "typescript.preferences.importModuleSpecifier": "relative",
  "emmet.includeLanguages": {
    "typescript": "html",
    "typescriptreact": "html"
  },
  "tailwindCSS.experimental.classRegex": [
    "clsx\\(([^)]*)\\)",
    "cn\\(([^)]*)\\)"
  ]
}

VS Code Snippets

Create .vscode/snippets.json for common patterns:

{
  "React Component": {
    "prefix": "rfc",
    "body": [
      "interface ${1:ComponentName}Props {",
      "  $2",
      "}",
      "",
      "export function ${1:ComponentName}({ $3 }: ${1:ComponentName}Props) {",
      "  return (",
      "    <div>$4</div>",
      "  );",
      "}"
    ],
    "description": "Create a React functional component"
  }
}

Development Tools Integration

ESLint Configuration

The project includes a comprehensive ESLint configuration:

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    '@typescript-eslint/recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier'
  ],
  rules: {
    // Custom rules for consistency
    'react/react-in-jsx-scope': 'off',
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    'prefer-const': 'error'
  }
};

Prettier Configuration

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

Testing Setup

Running Tests

# Run all tests
npm run test

# Run tests in watch mode
npm run test:watch

# Run tests with coverage
npm run test:coverage

# Run specific test file
npm run test -- ComponentName.test.tsx

Writing Tests

Example test structure:

// components/Button.test.tsx
import { render, screen, fireEvent } from '@testing-library/react';
import { Button } from './Button';

describe('Button Component', () => {
  it('renders with correct text', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  it('handles click events',
⚠️ **GitHub.com Fallback** ⚠️