Analog + PostgreSQL
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: analog5 environment: 6 DATABASE_URL: postgresql://${DB_USER}:${DB_PASSWORD}@postgres:5432/${DB_NAME}7 ports: 8 - "5173:5173"9 depends_on: 10 - postgres11 networks: 12 - analog-network1314 postgres: 15 image: postgres:16-alpine16 environment: 17 POSTGRES_DB: ${DB_NAME}18 POSTGRES_USER: ${DB_USER}19 POSTGRES_PASSWORD: ${DB_PASSWORD}20 volumes: 21 - postgres_data:/var/lib/postgresql/data22 networks: 23 - analog-network2425volumes: 26 postgres_data: 2728networks: 29 analog-network: 30 driver: bridge.env Template
.env
1DB_NAME=analog2DB_USER=analog3DB_PASSWORD=changemeUsage Notes
- 1Docs: https://analogjs.org/docs/
- 2Access at http://localhost:5173
- 3Angular with Vite for fast builds
- 4File-based routing and API routes
- 5Markdown/MDX content support
- 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 file2cat > docker-compose.yml << 'EOF'3services:4 analog:5 build: .6 container_name: analog7 environment:8 DATABASE_URL: postgresql://${DB_USER}:${DB_PASSWORD}@postgres:5432/${DB_NAME}9 ports:10 - "5173:5173"11 depends_on:12 - postgres13 networks:14 - analog-network1516 postgres:17 image: postgres:16-alpine18 environment:19 POSTGRES_DB: ${DB_NAME}20 POSTGRES_USER: ${DB_USER}21 POSTGRES_PASSWORD: ${DB_PASSWORD}22 volumes:23 - postgres_data:/var/lib/postgresql/data24 networks:25 - analog-network2627volumes:28 postgres_data:2930networks:31 analog-network:32 driver: bridge33EOF3435# 2. Create the .env file36cat > .env << 'EOF'37DB_NAME=analog38DB_USER=analog39DB_PASSWORD=changeme40EOF4142# 3. Start the services43docker compose up -d4445# 4. View logs46docker compose logs -fOne-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 | bashTroubleshooting
- 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
Shortcuts: C CopyF FavoriteD Download