# Framework Integration Guides

Watt supports seamless integration with popular frontend frameworks and Node.js runtimes. Each framework integration provides built-in development tools, optimized builds, and deployment-ready configurations.

Choose the framework that best fits your project needs - whether you're building static sites, server-rendered applications, or complex Node.js services.

## Frontend Frameworks

### [Astro](../reference/astro/overview.md)
Modern static site generator with component hydration and built-in optimizations.

- **[Overview](../reference/astro/overview.md)** - Getting started with Astro integration
- **[Configuration](../reference/astro/configuration.md)** - Complete configuration reference
- **[Caching](../reference/astro/caching.md)** - Caching strategies and configuration

### [Next.js](../reference/next/overview.md)
Full-stack React framework with server-side rendering and app router support.

- **[Overview](../reference/next/overview.md)** - Getting started with Next.js integration
- **[Configuration](../reference/next/configuration.md)** - Complete configuration reference

### [Nitro](../reference/nitro/overview.md)
Web server toolkit for standalone applications and Vite applications using the Nitro plugin.

- **[Overview](../reference/nitro/overview.md)** - Getting started with Nitro integration
- **[Configuration](../reference/nitro/configuration.md)** - Complete configuration reference

### [Nuxt](../reference/nuxt/overview.md)
Full-stack Vue framework powered by Nitro and Vite.

- **[Overview](../reference/nuxt/overview.md)** - Getting started with Nuxt integration
- **[Configuration](../reference/nuxt/configuration.md)** - Complete configuration reference

### [React Router](../reference/react-router/overview.md)
A user‑obsessed, standards‑focused, multi‑strategy router you can deploy anywhere.

- **[Overview](../reference/react-router/overview.md)** - Getting started with React Router integration
- **[Configuration](../reference/react-router/configuration.md)** - Complete configuration reference

### [Remix](../reference/remix/overview.md)
Full-stack web framework focused on web fundamentals and modern user experience.

- **[Overview](../reference/remix/overview.md)** - Getting started with Remix integration
- **[Configuration](../reference/remix/configuration.md)** - Complete configuration reference
- **[Caching](../reference/remix/caching.md)** - Caching strategies and configuration

### [Tanstack Start](../reference/tanstack/overview.md)
Full-stack Framework powered by TanStack Router for React and Solid.

- **[Overview](../reference/tanstack/overview.md)** - Getting started with Tanstack Start integration
- **[Configuration](../reference/tanstack/configuration.md)** - Complete configuration reference

### [Vite](../reference/vite/overview.md)
Fast build tool with hot module replacement for modern web projects.

- **[Overview](../reference/vite/overview.md)** - Getting started with Vite integration
- **[Configuration](../reference/vite/configuration.md)** - Complete configuration reference

## Node.js Runtimes

### [Node.js](../reference/node/overview.md)
Generic Node.js capability for custom applications and existing codebases.

- **[Overview](../reference/node/overview.md)** - Getting started with Node.js integration
- **[Configuration](../reference/node/configuration.md)** - Complete configuration reference

### [NestJS](../reference/nest/overview.md)
Progressive Node.js framework for building scalable server-side applications.

- **[Overview](../reference/nest/overview.md)** - Getting started with NestJS integration
- **[Configuration](../reference/nest/configuration.md)** - Complete configuration reference

## Quick Start

To add a framework to your Watt application:

1. **Add the application to your configuration:**
   ```json
   {
     "applications": [
       {
         "id": "frontend",
         "path": "./frontend",
         "config": "platformatic.json"
       }
     ]
   }
   ```

2. **Create framework-specific configuration:**
   Each framework has its own configuration file with framework-specific options and build settings.

3. **Run your application:**
   ```bash
   watt start
   ```

## Integration Features

All framework integrations provide:

- **Development Mode** - Hot reload and fast refresh during development
- **Production Builds** - Optimized builds for deployment
- **Environment Configuration** - Framework-specific environment variable handling
- **Logging Integration** - Unified logging across all applications
- **Metrics Collection** - Built-in observability and monitoring
- **TypeScript Support** - Full TypeScript integration where applicable

## Need Help?

- **New to Watt?** Start with the [Watt Quick Start](/docs/getting-started/quick-start) guide
- **Migrating an existing app?** See [Running Your Project in Watt](/docs/getting-started/port-your-app)
- **Framework-specific issues?** Check the individual framework reference pages above
- **Technical details?** Browse the complete [Reference Documentation](../reference/) 
- **Step-by-step tutorials?** Visit our [Learning Tutorials](../learn/beginner/crud-application.md)
- **Community support?** Join our [Discord Community](https://discord.gg/platformatic)
