인터페이스는 현지화되어 있으며, Skill 소개와 설명 문서는 선택한 언어로 AI가 자동 번역합니다. 코드·명령어·경로·전문 용어는 원문을 유지하며 원작자 문서가 우선합니다.
Skills 둘러보기
개발 및 엔지니어링 · SKILL.md

replit-local-dev-loop

replit-local-dev-loop

Configure Replit local development with hot reload and testing. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with Replit. Trigger with phrases like "replit dev setup", "replit local development", "replit dev environment", "develop with replit".

Independent GitHub snapshot · Automated classification · Original documentation governs

Skill 문서

GitHub

name: replit-local-dev-loop description: | Configure Replit local development with hot reload and testing. Use when setting up a development environment, configuring test workflows, or establishing a fast iteration cycle with Replit. Trigger with phrases like "replit dev setup", "replit local development", "replit dev environment", "develop with replit". allowed-tools: Read, Write, Edit, Bash(npm:), Bash(pnpm:), Grep version: 1.0.0 license: MIT author: Jeremy Longshore jeremy@intentsolutions.io

Replit Local Dev Loop

Overview

Set up a fast, reproducible local development workflow for Replit.

Prerequisites

  • Completed replit-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-replit-project/
├── src/
│   ├── replit/
│   │   ├── client.ts       # Replit client wrapper
│   │   ├── config.ts       # Configuration management
│   │   └── utils.ts        # Helper functions
│   └── index.ts
├── tests/
│   └── replit.test.ts
├── .env.local              # Local secrets (git-ignored)
├── .env.example            # Template for team
└── package.json

Step 2: Configure Environment

# Copy environment template
cp .env.example .env.local

# Install dependencies
npm install

# Start development server
npm run dev

Step 3: Setup Hot Reload

{
  "scripts": {
    "dev": "tsx watch src/index.ts",
    "test": "vitest",
    "test:watch": "vitest --watch"
  }
}

Step 4: Configure Testing

import { describe, it, expect, vi } from 'vitest';
import { ReplitClient } from '../src/replit/client';

describe('Replit Client', () => {
  it('should initialize with API key', () => {
    const client = new ReplitClient({ 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 Replit development

Error Handling

ErrorCauseSolution
Module not foundMissing dependencyRun npm install
Port in useAnother processKill process or change port
Env not loadedMissing .env.localCopy from .env.example
Test timeoutSlow networkIncrease test timeout

Examples

Mock Replit Responses

vi.mock('@replit/sdk', () => ({
  ReplitClient: vi.fn().mockImplementation(() => ({
    // Mock methods here
  })),
}));

Debug Mode

# Enable verbose logging
DEBUG=REPLIT=* npm run dev

Resources

Next Steps

See replit-sdk-patterns for production-ready code patterns.

저장한 Skills