home / skills / jeremylongshore / claude-code-plugins-plus-skills / firecrawl-local-dev-loop

This skill speeds up local FireCrawl development with hot reload and testing setup for fast iteration.

npx playbooks add skill jeremylongshore/claude-code-plugins-plus-skills --skill firecrawl-local-dev-loop

Review the files below or copy the command above to add this skill to your agents.

Files (1)
SKILL.md
3.0 KB
---
name: firecrawl-local-dev-loop
description: |
  Configure FireCrawl local development with hot reload and testing.
  Use when setting up a development environment, configuring test workflows,
  or establishing a fast iteration cycle with FireCrawl.
  Trigger with phrases like "firecrawl dev setup", "firecrawl local development",
  "firecrawl dev environment", "develop with firecrawl".
allowed-tools: Read, Write, Edit, Bash(npm:*), Bash(pnpm:*), Grep
version: 1.0.0
license: MIT
author: Jeremy Longshore <[email protected]>
---

# FireCrawl Local Dev Loop

## Overview
Set up a fast, reproducible local development workflow for FireCrawl.

## Prerequisites
- Completed `firecrawl-install-auth` setup
- Node.js 18+ with npm/pnpm
- Code editor with TypeScript support
- Git for version control

## Instructions

### Step 1: Create Project Structure
```
my-firecrawl-project/
├── src/
│   ├── firecrawl/
│   │   ├── client.ts       # FireCrawl client wrapper
│   │   ├── config.ts       # Configuration management
│   │   └── utils.ts        # Helper functions
│   └── index.ts
├── tests/
│   └── firecrawl.test.ts
├── .env.local              # Local secrets (git-ignored)
├── .env.example            # Template for team
└── package.json
```

### Step 2: Configure Environment
```bash
# Copy environment template
cp .env.example .env.local

# Install dependencies
npm install

# Start development server
npm run dev
```

### Step 3: Setup Hot Reload
```json
{
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "test": "vitest",
    "test:watch": "vitest --watch"
  }
}
```

### Step 4: Configure Testing
```typescript
import { describe, it, expect, vi } from 'vitest';
import { FireCrawlClient } from '../src/firecrawl/client';

describe('FireCrawl Client', () => {
  it('should initialize with API key', () => {
    const client = new FireCrawlClient({ apiKey: 'test-key' });
    expect(client).toBeDefined();
  });
});
```

## Output
- Working development environment with hot reload
- Configured test suite with mocking
- Environment variable management
- Fast iteration cycle for FireCrawl development

## Error Handling
| Error | Cause | Solution |
|-------|-------|----------|
| Module not found | Missing dependency | Run `npm install` |
| Port in use | Another process | Kill process or change port |
| Env not loaded | Missing .env.local | Copy from .env.example |
| Test timeout | Slow network | Increase test timeout |

## Examples

### Mock FireCrawl Responses
```typescript
vi.mock('@firecrawl/sdk', () => ({
  FireCrawlClient: vi.fn().mockImplementation(() => ({
    // Mock methods here
  })),
}));
```

### Debug Mode
```bash
# Enable verbose logging
DEBUG=FIRECRAWL=* npm run dev
```

## Resources
- [FireCrawl SDK Reference](https://docs.firecrawl.com/sdk)
- [Vitest Documentation](https://vitest.dev/)
- [tsx Documentation](https://github.com/esbuild-kit/tsx)

## Next Steps
See `firecrawl-sdk-patterns` for production-ready code patterns.

Overview

This skill configures a fast local development loop for FireCrawl with hot reload, environment management, and testing. It provides a reproducible project layout, scripts for live reload, and a basic Vitest test setup to speed iterations. Use it to get a compact, developer-friendly environment ready for feature work and debugging.

How this skill works

The skill scaffolds a standard project structure, copies a local env file, installs dependencies, and adds npm scripts that run tsx in watch mode for hot reload. It includes a Vitest-based test configuration and examples for mocking the FireCrawl SDK. Error hints and debug flags help diagnose common local problems like missing env files, port conflicts, or uninstalled packages.

When to use it

  • Setting up a new FireCrawl feature or plugin locally
  • Iterating quickly with live reload while developing TypeScript code
  • Running unit tests and mocks for FireCrawl client behavior
  • Onboarding new developers to a consistent local workflow
  • Creating a reproducible dev environment before CI integration

Best practices

  • Keep .env.local git-ignored and provide .env.example for teammates
  • Use vi.mock to isolate FireCrawl SDK calls in unit tests
  • Run npm run dev with DEBUG=FIRECRAWL=* for verbose logging when debugging
  • Use a small, focused client wrapper in src/firecrawl to centralize API logic
  • Pin Node and package manager versions to avoid environment drift

Example use cases

  • Spin up a local session to develop a new FireCrawl client method with immediate feedback via tsx watch
  • Write unit tests that mock network calls to validate client behavior without hitting the real API
  • Debug environment variable issues by comparing .env.local with .env.example
  • Run test:watch to exercise tests continuously while refactoring code
  • Use verbose DEBUG logging to trace request/response flow during integration work

FAQ

What if tsx or vitest is not installed?

Install dependencies with npm install; add tsx and vitest to devDependencies if missing.

How do I fix tests that hang or timeout?

Increase Vitest timeout or mock external network calls to remove flakiness.