Fullstack Angular with Analog 🚀

With the current iteration of the web ecosystem, many frameworks are taking a server-first approach to building applications and websites. This is largely being done through meta-frameworks, such as Next.JS, SvelteKit, Nuxt, Qwik City, and more. These meta-frameworks have features such as filesystem-based routing, server-side rendering, static site generation, built-in API routes, and more integrated into the developer experience.

Analog is the meta-framework that helps you ship applications and websites faster with Angular.

Features

Analog is built on top of Angular with additional capabilities including:

First-class support for the Vite ecosystem (Vitest, Playwright, Cypress, and more)
File-based routing
Support for using markdown as content routes
Support for API/server routes
Hybrid SSR/SSG support
Supports Angular CLI/Nx workspaces
And more integrations

Let's Dive In!

Getting Started 🤓

To create a new Analog project, you can use the create-analog package with your package manager of choice:

npm create analog@latest analog-app
cd analog-app

You can also scaffold a new project with Nx.

Install the dependencies:

npm install

And serve the application:

npm start

Navigate to http://localhost:5173 to see the application running in your browser.

To build for deployment, run the build command:

npm run build

Fileystem-based Routing 🤖

Analog provides filesystem-based routing on top of the Angular Router.

For example, to define a /about route, create a file named src/app/pages/about.page.ts in the Analog project.

Next, add a standalone Angular component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  standalone: true,
  template: `
    <h2>Hello Analog</h2>

    Analog is a meta-framework on top of Angular.
  `,
})
export default class AboutPageComponent {}

Save the changes and there's your route without any additional configuration!

Navigate to http://localhost:5173/about to see the about page.

Analog also supports static routes, dynamic routes, nested routes, catch-all routes, and more.

API Routes 🧑‍🔧

Analog supports defining API routes that can be used to serve data to the application.

API routes are defined in the src/server/routes folder. API routes are also filesystem-based, and are exposed under the default /api prefix in development.

For example, to define an API route to send a "Hello Word" message as JSON:

Create a src/server/routes/v1/hello.ts file

import { defineEventHandler } from 'h3';

export default defineEventHandler(() => {
  return { message: 'Hello World' };
});

Save the changes, and now you can access this API route at /api/v1/hello. Query databases, connect to your CMS, and perform other actions on the server.

Server-Side Rendering and Static Site Generation 📈

Server-Side Rendering and Static Site Generation can enhance your Angular application in terms of SEO and performance. Analog supports server-side rendering and static site generation out of the box, and is enabled by default.

To build for deployment, run the build command:

npm run build

To pre-render pages, configure them in the vite.config.ts at the root of the project:

import { defineConfig } from 'vite';
import analog from '@analogjs/platform';

// https://vitejs.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    analog({
      prerender: {
        routes: async () => [
          '/',
          '/about',
          '/blog',
          '/blog/posts/2023-06-28-my-first-post',
        ],
      },
    }),
  ],
}));

These routes are pre-rendered to static HTML at build time and sent to the client before the Angular application is loaded, providing a better user experience. The Angular application is then loaded, providing a continued interactive user experience for the website or application.

Deployment 🚀

You can also deploy Analog applications to many different providers with little to no configuration including Netlify, Vercel, Firebase, and more.

Visit the deployment docs to learn more.

Sponsor Analog 💰

Analog is an MIT-licensed open-source project, but the effort needed to maintain this project is supported through sponsorships and contributions. We are looking for sponsorships and partnerships to support future development of the project.

Consider sponsoring the Analog project.

If you are a business using Angular to build a revenue-generating product, sponsoring Analog and its development also helps your interests in pushing Analog and Angular forward. If you are an individual who supports open-source projects, considering sponsoring and contributing to Analog.

Join the Community 🤝

Visit and Star the GitHub Repo
Join the Discord
Follow us on Twitter

If you liked this, click the ❤️ so other people will see it. Follow me on Twitter and subscribe to my YouTube Channel for content on Angular, Analog, NgRx, and more!

Blog