Core Concepts

Local Development

How to develop Webiny applications locally with watch commands.

WHAT YOU'LL LEARN

- How local development works in Webiny - Using watch commands for Admin and API - Understanding Local AWS Lambda Development

Overview

Webiny provides a streamlined local development experience through watch commands. You can develop both Admin UI and API extensions locally while connected to your deployed AWS infrastructure. This hybrid approach gives you fast iteration with a realistic environment.

Prerequisites

Before starting local development, deploy Core and API applications:

Admin Deployment Optional

You don't need to deploy the Admin app for local development. Only deploy it with `yarn webiny deploy admin` when you need a CloudFront URL to share with others or test in production-like conditions.

Admin Development

Starting the Dev Server

This command:

Starts development server on http://localhost:3001
Enables hot module replacement
Watches for changes in Admin extensions
Provides instant feedback on changes

What You Can Develop

Custom Admin UI extensions
White-label branding and themes
Custom navigation items
New Admin pages and views

API Development

Local AWS Lambda Development

API development uses a unique approach that runs Lambda code locally while connected to cloud services:

How It Works

Lambda Stubs Deployed - Cloud Lambda functions replaced with forwarding stubs
Event Forwarding - AWS requests forwarded to your local machine
Local Execution - Code runs locally with full Lambda context
Response Routing - Results sent back through Lambda stub

Why This Hybrid Approach?

This hybrid approach (code runs locally, but connects to cloud services) exists because of the serverless nature of the services Webiny relies on. Running DynamoDB, OpenSearch, S3, Cognito, and other AWS services entirely locally would be complex and unreliable. It's simpler and more practical to run your code locally while connecting to real AWS infrastructure - you get fast iteration with a realistic environment.

What You Can Develop

GraphQL Schemas - Custom types and fields
Resolvers - Business logic and data fetching
Event Handlers - Lifecycle hooks and reactions
Custom Endpoints - REST APIs or webhooks
Background Tasks - Async processing logic

Important Considerations

Redeploy After Watch

When you stop the watch command, Lambda functions still contain stub code. You must redeploy to restore actual Lambda code:

The watch command will remind you when you stop it.

Infrastructure Development

Infrastructure changes require deployment and cannot be tested with watch commands:

webiny.config.tsx

To apply infrastructure changes:

Development Workflow

Initial Setup

For new team members:

Daily Development

Start watch command for the app you’re working on
Make changes in extensions/ folder
Test locally with immediate feedback
Deploy when ready to share or update infrastructure

Concurrent Development

Run multiple watch commands in separate terminals:

Website Builder Development

If you’re developing with Website Builder, you’ll need to run your website application locally (e.g., a Next.js app) in addition to the watch commands.

Website Builder Integration

Website Builder development workflow and setup is covered in detail in the Website Builder section of the documentation.

TypeScript and Build Validation

Webiny enforces TypeScript checking:

IDE Support - Real-time type errors
Build Validation - Compilation fails on type errors
Deployment Safety - Errors caught before production