docker.recipes

Analog + PostgreSQL

intermediate

Angular meta-framework with file-based routing.

Overview

Analog is a full-stack Angular meta-framework that brings modern development patterns to Angular applications through file-based routing, server-side rendering, and API routes. Built on top of Vite and Nitro, Analog bridges the gap between Angular's component-based architecture and meta-framework conveniences found in Next.js or SvelteKit, offering features like automatic route generation, hybrid rendering modes, and content authoring with Markdown/MDX support. This stack combines Analog's modern Angular development experience with PostgreSQL's enterprise-grade relational database capabilities, creating a robust foundation for data-driven Angular applications that require complex queries, ACID transactions, and scalable data management. The combination is particularly powerful for developers who want to leverage Angular's mature ecosystem while benefiting from file-based routing and SSR capabilities, backed by PostgreSQL's advanced features like JSON/JSONB support, full-text search, and extensible type system. This pairing serves teams building content-heavy applications, e-commerce platforms, or enterprise dashboards where Angular's TypeScript-first approach and PostgreSQL's data integrity guarantees are essential requirements.

Key Features

  • File-based routing system that automatically generates Angular routes from directory structure
  • Server-side rendering and static site generation with Nitro deployment adapter
  • API routes co-located with frontend code using Angular's dependency injection
  • Vite-powered development server with hot module replacement for Angular components
  • MDX and Markdown content support with frontmatter parsing for blog-style applications
  • PostgreSQL JSON/JSONB columns for flexible schema design alongside relational data
  • Full-text search capabilities using PostgreSQL's built-in search features
  • ACID-compliant transactions ensuring data consistency across complex operations

Common Use Cases

  • 1Content management systems with Angular admin interfaces and PostgreSQL content storage
  • 2E-commerce applications requiring product catalogs, inventory tracking, and order management
  • 3Developer documentation sites using MDX content with user authentication and progress tracking
  • 4Enterprise dashboards displaying complex analytics from PostgreSQL data warehouses
  • 5Multi-tenant SaaS applications leveraging PostgreSQL's row-level security features
  • 6Blog platforms with Angular-based editors and PostgreSQL full-text search
  • 7Real estate or job listing sites with geospatial queries using PostGIS extension

Prerequisites

  • Docker and Docker Compose installed with at least 2GB available RAM for PostgreSQL
  • Node.js 18+ knowledge for Angular and Analog development patterns
  • Understanding of Angular concepts including services, components, and dependency injection
  • Basic PostgreSQL knowledge including SQL queries and database design principles
  • Port 5173 available for Analog development server access
  • Environment variables configured for database credentials and connection strings

For development & testing. Review security settings, change default credentials, and test thoroughly before production use. See Terms

docker-compose.yml

docker-compose.yml
1services:
2 analog:
3 build: .
4 container_name: analog
5 environment:
6 DATABASE_URL: postgresql://${DB_USER}:${DB_PASSWORD}@postgres:5432/${DB_NAME}
7 ports:
8 - "5173:5173"
9 depends_on:
10 - postgres
11 networks:
12 - analog-network
13
14 postgres:
15 image: postgres:16-alpine
16 environment:
17 POSTGRES_DB: ${DB_NAME}
18 POSTGRES_USER: ${DB_USER}
19 POSTGRES_PASSWORD: ${DB_PASSWORD}
20 volumes:
21 - postgres_data:/var/lib/postgresql/data
22 networks:
23 - analog-network
24
25volumes:
26 postgres_data:
27
28networks:
29 analog-network:
30 driver: bridge

.env Template

.env
1DB_NAME=analog
2DB_USER=analog
3DB_PASSWORD=changeme

Usage Notes

  1. 1Docs: https://analogjs.org/docs/
  2. 2Access at http://localhost:5173
  3. 3Angular with Vite for fast builds
  4. 4File-based routing and API routes
  5. 5Markdown/MDX content support
  6. 6Nitro server for deployment anywhere

Individual Services(2 services)

Copy individual services to mix and match with your existing compose files.

analog
analog:
  build: .
  container_name: analog
  environment:
    DATABASE_URL: postgresql://${DB_USER}:${DB_PASSWORD}@postgres:5432/${DB_NAME}
  ports:
    - "5173:5173"
  depends_on:
    - postgres
  networks:
    - analog-network
postgres
postgres:
  image: postgres:16-alpine
  environment:
    POSTGRES_DB: ${DB_NAME}
    POSTGRES_USER: ${DB_USER}
    POSTGRES_PASSWORD: ${DB_PASSWORD}
  volumes:
    - postgres_data:/var/lib/postgresql/data
  networks:
    - analog-network

Quick Start

terminal
1# 1. Create the compose file
2cat > docker-compose.yml << 'EOF'
3services:
4 analog:
5 build: .
6 container_name: analog
7 environment:
8 DATABASE_URL: postgresql://${DB_USER}:${DB_PASSWORD}@postgres:5432/${DB_NAME}
9 ports:
10 - "5173:5173"
11 depends_on:
12 - postgres
13 networks:
14 - analog-network
15
16 postgres:
17 image: postgres:16-alpine
18 environment:
19 POSTGRES_DB: ${DB_NAME}
20 POSTGRES_USER: ${DB_USER}
21 POSTGRES_PASSWORD: ${DB_PASSWORD}
22 volumes:
23 - postgres_data:/var/lib/postgresql/data
24 networks:
25 - analog-network
26
27volumes:
28 postgres_data:
29
30networks:
31 analog-network:
32 driver: bridge
33EOF
34
35# 2. Create the .env file
36cat > .env << 'EOF'
37DB_NAME=analog
38DB_USER=analog
39DB_PASSWORD=changeme
40EOF
41
42# 3. Start the services
43docker compose up -d
44
45# 4. View logs
46docker compose logs -f

One-Liner

Run this command to download and set up the recipe in one step:

terminal
1curl -fsSL https://docker.recipes/api/recipes/analog-postgres/run | bash

Troubleshooting

  • Module not found errors in Analog: Ensure TypeScript paths are configured correctly in tsconfig.json and Vite can resolve Angular imports
  • Database connection refused: Verify PostgreSQL container is fully initialized before Analog starts by checking docker logs postgres
  • File-based routes not generating: Check that page files are in the correct src/app/pages directory with proper naming conventions
  • SSR hydration mismatches: Ensure server and client environments have consistent data by implementing proper data fetching in route components
  • PostgreSQL connection pool exhausted: Adjust max_connections in PostgreSQL config or implement connection pooling in Analog application code
  • Vite build failures with Angular dependencies: Update @analogjs/vite-plugin-angular and ensure peer dependencies are compatible versions

Community Notes

Loading...
Loading notes...

Download Recipe Kit

Get all files in a ready-to-deploy package

Includes docker-compose.yml, .env template, README, and license

Ad Space