# Analog — The Fullstack Angular Meta-Framework Powered by Vite

> A Vite-powered Angular meta-framework that adds file-based routing, API routes, server-side rendering, and static site generation to Angular projects.

## Install

Save in your project root:

# Analog — The Fullstack Angular Meta-Framework Powered by Vite

## Quick Use
```bash
npx create-analog@latest my-app
cd my-app && npm run dev
```

## Introduction
Analog is the fullstack meta-framework for Angular that brings file-based routing, API routes, and hybrid rendering to the Angular ecosystem. Powered by Vite and Nitro, it offers fast builds and a modern developer experience similar to what Next.js provides for React.

## What Analog Does
- Adds file-based routing to Angular with automatic route generation from the filesystem
- Provides API routes for building backend endpoints alongside your Angular app
- Supports server-side rendering, static site generation, and hybrid rendering modes
- Uses Vite for fast development builds with hot module replacement
- Deploys to multiple platforms via Nitro including Vercel, Netlify, and Cloudflare

## Architecture Overview
Analog uses Vite as its build tool with Angular-specific plugins for component compilation. Nitro handles the server layer, enabling API routes and SSR deployment to serverless platforms. File-based routing maps the filesystem to Angular route configurations automatically, while content plugins support markdown pages.

## Setup & Configuration
- Scaffold a project with create-analog or add Analog to an existing Angular app
- Configure rendering mode (SSR, SSG, or client-only) in vite.config.ts
- Define API routes in the src/server/routes directory
- Set up content collections for markdown-based pages and blogs
- Configure deployment adapter for your target platform

## Key Features
- File-based routing with dynamic segments, catch-all routes, and route groups
- API routes with full access to server-side dependencies and databases
- Markdown and MDX content support with frontmatter metadata
- Vite-powered development with sub-second hot reload times
- Deployment presets for Vercel, Netlify, Cloudflare Pages, and more

## Comparison with Similar Tools
- **Next.js** — the React equivalent; Analog brings similar patterns to Angular
- **Nuxt** — Vue's meta-framework; Analog fills the same role for the Angular ecosystem
- **SvelteKit** — Svelte's fullstack framework; Analog uses Vite and Nitro similarly
- **Angular Universal** — official SSR solution; Analog wraps it with better DX and file-based routing
- **Astro** — content-focused multi-framework; Analog is Angular-native with full interactivity

## FAQ
**Q: Can I use Analog with existing Angular libraries?**
A: Yes. Analog is fully compatible with the Angular ecosystem including Angular Material and NgRx.

**Q: Does it support Angular standalone components?**
A: Yes. Analog leverages standalone components as the default approach for route components.

**Q: How does API route authentication work?**
A: API routes have access to the full Nitro/H3 request context for implementing authentication middleware.

**Q: Is Analog production-ready?**
A: Analog reached version 1.0 and is used in production applications across multiple deployment platforms.

## Sources
- https://github.com/analogjs/analog
- https://analogjs.org

---
Source: https://tokrepo.com/en/workflows/asset-68acad0e
Author: AI Open Source