Analog Meta-Framework for Angular

Analog is a meta-framework for building applications and websites with Angular, providing a developer experience similar to Next.js or Nuxt. Key features include:

• Vite-powered: High-performance development and build process.
• File-based routing: Automatically defines routes based on your file structure.
• Nitro-powered: Server and deployment integrations via Nitro.
• Hybrid Rendering: Supports both Server-Side Rendering (SSR) and Static Site Generation (SSG).
• Content Support: Use Markdown as content routes.
• API/Server Routes: Integrated support for server-side logic.
• Tooling Support: Built-in support for Vitest, Storybook, Angular CLI, and Nx workspaces.

Astro projects follow a specific directory convention for routing and assets:

• Routing: Astro automatically exposes .astro or .md files located in src/pages/ as routes based on their filenames.
• Components: Custom components (Astro, React, Vue, Svelte, or Preact) are typically stored in src/components/.
• Static Assets: Files like images or favicons that should be served as-is are placed in the public/ directory.

Example structure:

/
├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   │   └── Card.astro
│   ├── layouts/
│   │   └── Layout.astro
│   └── pages/
│       └── index.astro
└── package.json

Analog provides several key capabilities for modern web development:

• Tooling: Built on Vite, Vitest, and Playwright.
• Server/Deployment: Powered by Nitro for server and deployment integrations.
• Routing: Supports file-based routing and using Markdown as content routes.
• Data Fetching: Supports server-side data fetching.
• API Routes: Supports creating API and server routes.
• Rendering Modes: Hybrid support for Server-Side Rendering (SSR) and Static Site Generation (SSG).
• Integrations: Works with Angular CLI, Nx workspaces, and supports using Angular components within Astro via @analogjs/astro-angular.

You can scaffold a new, standalone Nx workspace preconfigured with Analog using the @analogjs/platform preset. During the setup process, you will be prompted for your application name and whether you want to include TailwindCSS. If TailwindCSS is selected, all dependencies and configurations are automatically set up.

npx create-nx-workspace@latest --preset=@analogjs/platform

By default, uncaught errors return a 500 Internal Server Error. To return specific HTTP status codes, use the createError function from h3 to throw an exception.

import { defineEventHandler, getRouterParam, createError } from 'h3';

export default defineEventHandler((event) => {
  const param = getRouterParam(event, 'id');
  const id = parseInt(param ? param : '');
  if (!Number.isInteger(id)) {
    throw createError({
      statusCode: 400,
      statusMessage: 'ID should be an integer',
    });
  }
  return `ID is ${id}`;
});

Update your .storybook/main.ts to use the StorybookConfig type and set the framework name to @analogjs/storybook-angular. Ensure you remove any existing webpackFinal configuration.

Additionally, update your angular.json or project.json to use the @analogjs/storybook-angular builders for storybook and build-storybook. Remove any webpack specific options and the browserTarget option. Finally, add /storybook-static to your .gitignore.

import { StorybookConfig } from '@analogjs/storybook-angular';

const config: StorybookConfig = {
  // other config, addons, etc.
  framework: {
    name: '@analogjs/storybook-angular',
    options: {},
  },
};

export default config;

To enable experimental Progressive Streaming SSR, you must configure the analog plugin in your vite.config.ts with the streaming experimental flag set to true. This allows the server to flush the document head and @defer blocks progressively, improving Time to First Byte (TTFB) and First Contentful Paint (FCP).

// vite.config.ts
export default defineConfig({
  plugins: [analog({ experimental: { streaming: true } })],
});