Supported Frameworks

AutoDeployBase supports 8 web frameworks, each optimized for different use cases.

Framework Comparison

Framework	Language	Best For	SSR	API Routes
Next.js	React	Full-stack apps	Yes	Yes
Nuxt	Vue	Vue applications	Yes	Yes
SvelteKit	Svelte	Svelte apps	Yes	Yes
Remix	React	Nested routes	Yes	Yes
Astro	Any	Content sites	Yes	Yes
Hono	TypeScript	APIs	No	Yes
Fresh	Preact/Deno	Deno apps	Yes	Yes
React+Vite	React	SPAs	No	No

Next.js

The most popular React framework with excellent DX.

npx autodeploybase init my-app --framework next

Features

• App Router - File-based routing with layouts
• Server Components - Zero-JS by default
• API Routes - Built-in API endpoints
• Middleware - Edge runtime middleware
• Image Optimization - Automatic optimization
• Incremental Static Regeneration - Dynamic static pages

Generated Structure

src/
├── app/
│   ├── api/
│   │   └── auth/
│   │       └── route.ts
│   ├── layout.tsx
│   └── page.tsx
├── components/
└── lib/

Best Practices

• Use Server Components for data fetching
• Keep client components small
• Use loading.tsx for suspense
• Leverage middleware for auth

Nuxt 3

The Vue.js framework with auto-imports and excellent DX.

npx autodeploybase init my-app --framework nuxt

Features

• Auto-imports - Components and composables
• File-based Routing - Pages directory
• Server Routes - Nitro server
• State Management - Built-in useState
• Data Fetching - useFetch, useAsyncData

Generated Structure

├── components/
├── composables/
├── pages/
├── server/
│   ├── api/
│   └── middleware/
└── nuxt.config.ts

Best Practices

• Use composables for shared logic
• Leverage auto-imports
• Use useFetch for data
• Configure Nitro for deployment

SvelteKit

Modern Svelte framework with excellent performance.

npx autodeploybase init my-app --framework sveltekit

Features

• File-based Routing - +page.svelte files
• Form Actions - Server-side form handling
• Load Functions - SSR data loading
• Hooks - Request/response hooks
• Adapters - Deploy anywhere

Generated Structure

src/
├── lib/
│   ├── components/
│   └── server/
├── routes/
│   ├── +layout.svelte
│   ├── +page.svelte
│   └── api/
│       └── +server.ts
└── hooks.server.ts

Best Practices

• Use +page.server.ts for data
• Leverage form actions
• Keep stores in $lib
• Use hooks for auth

Remix

React framework focused on web fundamentals.

npx autodeploybase init my-app --framework remix

Features

• Nested Routes - Layout-based routing
• Loaders - Server-side data loading
• Actions - Form mutations
• Error Boundaries - Graceful error handling
• Progressive Enhancement - Works without JS

Generated Structure

app/
├── routes/
│   ├── _index.tsx
│   ├── admin/
│   │   └── _layout.tsx
│   └── api/
│       └── auth.ts
├── components/
└── utils/

Best Practices

• Use loaders for all data
• Actions for mutations
• Embrace form elements
• Error boundaries everywhere

Astro

Content-focused framework with islands architecture.

npx autodeploybase init my-app --framework astro

Features

• Islands Architecture - Partial hydration
• Content Collections - Type-safe content
• Multiple Frameworks - Use React, Vue, Svelte
• Zero JS Default - Ships no JS by default
• SSG/SSR - Both supported

Generated Structure

src/
├── components/
├── content/
│   └── blog/
├── layouts/
├── pages/
│   ├── index.astro
│   └── api/
└── astro.config.mjs

Best Practices

• Use .astro for static
• Islands for interactivity
• Content collections for blogs
• Leverage view transitions

Hono

Ultra-fast web framework for APIs.

npx autodeploybase init my-api --framework hono

Features

• Fast - Built for edge
• Middleware - Express-like
• Validators - Built-in validation
• OpenAPI - Auto-generated docs
• Multi-runtime - Node, Deno, Bun, Edge

Generated Structure

src/
├── routes/
│   ├── auth.ts
│   └── admin.ts
├── middleware/
├── validators/
└── index.ts

Best Practices

• Use middleware for auth
• Zod for validation
• Group routes logically
• Leverage edge runtime

Fresh (Deno)

The Deno-native web framework.

npx autodeploybase init my-app --framework fresh

Features

• No Build Step - Just-in-time rendering
• Island Architecture - Partial hydration
• Deno Native - TypeScript, secure
• Preact - Lightweight components

Generated Structure

├── components/
├── islands/
├── routes/
│   ├── index.tsx
│   └── api/
└── fresh.config.ts

Best Practices

• Use islands sparingly
• Leverage Deno APIs
• Keep routes simple
• Use handlers for data

React + Vite

Client-side React SPA.

npx autodeploybase init my-spa --framework react

Features

• Fast HMR - Lightning-fast dev
• Modern Build - ESBuild + Rollup
• TypeScript - First-class support
• CSS Modules - Scoped styles

Generated Structure

src/
├── components/
├── hooks/
├── pages/
├── App.tsx
└── main.tsx

Best Practices

• Use React Router
• State with Zustand/Jotai
• API calls to external backend
• Consider React Query

Cross-Framework Components

AutoDeployBase uses Mitosis to compile components across frameworks:

components/Button.lite.tsx

import { useState } from '@builder.io/mitosis';

export default function Button(props) {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {props.label}: {count}
    </button>
  );
}

Compiles to: React, Vue, Svelte, Solid, Qwik

See Mitosis Guide for details.