Skip to main content
Version: 3.69.0

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​

Modern static site generator with component hydration and built-in optimizations.

  • Overview - Getting started with Astro integration
  • Configuration - Complete configuration reference
  • Caching - Caching strategies and configuration

Next.js​

Full-stack React framework with server-side rendering and app router support.

Nitro​

Web server toolkit for standalone applications and Vite applications using the Nitro plugin.

Nuxt​

Full-stack Vue framework powered by Nitro and Vite.

React Router​

A user‑obsessed, standards‑focused, multi‑strategy router you can deploy anywhere.

  • Overview - Getting started with React Router integration
  • Configuration - Complete configuration reference

Remix​

Full-stack web framework focused on web fundamentals and modern user experience.

  • Overview - Getting started with Remix integration
  • Configuration - Complete configuration reference
  • Caching - Caching strategies and configuration

Tanstack Start​

Full-stack Framework powered by TanStack Router for React and Solid.

  • Overview - Getting started with Tanstack Start integration
  • Configuration - Complete configuration reference

Vite​

Fast build tool with hot module replacement for modern web projects.

Node.js Runtimes​

Node.js​

Generic Node.js capability for custom applications and existing codebases.

NestJS​

Progressive Node.js framework for building scalable server-side applications.

Quick Start​

To add a framework to your Watt application:

  1. Add the application to your configuration:

    {
      "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:

    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?​