An Enterprise-grade architecture template based on Astro SSR (Server-Side Rendering) developed specifically to handle production scale (Production-Ready). This template wraps a robust Environment Requirement validation layer, strong Endpoint security system, and Search Engine Optimization (SEO) metrics that exceed standard web engineering frameworks.
Highly recommended for you to clone as the foundational base for your next corporate project or high-level portfolio.
Security is always a vulnerable point in frontend applications hitting public APIs. This repository has addressed it:
- Type-Safe Environment Variables: Using
Zodinsrc/config/env.server.ts. Astro will intentionally crash (Fail-Fast) during the build if the.envconfiguration is incomplete or the API URL is malformed. This will save your project from secret data leaks due to misconfiguration in production. - Endpoint Payload Validator: Form integrations (like Booking) are secured at the API level (
src/pages/api/). Hacker scripts (Malicious JSON) will automatically be rejected (Bad Request 400) if the input JSON format type does not match the Static schemaz.object({...}). - In-Memory Rate Limiter: Public APIs are protected by IP Rate Limiting logic (e.g., Max 3 requests / 60 seconds). This prevents your backend Strapi database from crashing due to being blasted by thousands of bot DDoS attacks from forms on the frontend.
- Dynamic Real-time XML Sitemap (
sitemap.xml.ts): No more static sitemap packages. The Server-based (SSR) rendered sitemap maps all dynamic routes (e.g.,[slug].astro) that directly hit the CMS API in real-time! Simply publish an article on the Backend, and the Astro Sitemap gets updated automatically when extracted by Google Bot! - Enterprise JSON-LD: A Google Standard formatted
<script type="application/ld+json">is injected dynamically on every page via the<SEO />component props. Google truly recognizes theLocalBusinessentity on the Homepage andArticle/NewsArticleentities on the blog. - Open Graph & Canonical Defense: Ensures Duplicate Content Penalty does not occur through built-in
<link rel="canonical">synchronization if the URL is ambiguously accessed via spam parameters. - Zero-Latency Analytics (Partytown): The heavy Google Analytics 4 (GA4) script is safely executed within the built-in Web Worker domain (
@astrojs/partytown), keeping the main-thread 100% fast and unblocked, complete with an automatic interaction blocker sensor when the website is opened in a local development host (isProd).
- Island Architecture: Main concept: Passive pages (Articles, Landing Pages) are consumed extremely fast as plain static HTML, while smart, stateful, and reactive functionalities (like
BookingModal.tsx) use React DOM modules (client:load). - Tailwind v4 & Shadcn UI: Supports the aesthetic composition of the interface with high efficiency, complete with Radix UI Primitive interactivity capabilities.
- Absolute Path Aliases (
@/*): Supports module resolution viatsconfig.jsonpaths so that the application reference tree is not cluttered with complex imports like../../../../lib.
- Non-Root Docker Execution: The
Dockerfileconfiguration is not executed with standard OS root accounts. Instead, commands are delegated to theUSER appescalation, providing extreme-level perimeter isolation in case the web is somehow compromised. (Astro is placed in anode standaloneenv). - GitHub Workflow CI/CD (
deploy.yml): An integration pipeline cycle process that supports injecting GitHub Secrets directly into a temporary.envbefore being built by the container.
A neat and scalable structural approach:
📦 project-root
├── 📂 public/ # Assets served directly by web workers (robots.txt, /img)
├── 📂 src/
│ ├── 📂 components/ # Reusable UI Components (Shadcn, <SEO/>, and .tsx)
│ ├── 📂 config/ # Single-Source of Truth for Environment Variables & Zod Setup
│ ├── 📂 layouts/ # Main Layout Templates (along with global SEO Injector <head>)
│ ├── 📂 lib/ # Third-party module libraries, Strapi API fetchers, and Caching
│ ├── 📂 pages/ # File Based Route (Astro Endpoint .ts & Page Sequences .astro)
│ ├── 📂 styles/ # Global CSS & Tailwind configs
│ └── 📂 types/ # Centralization of TypeScript Type System (Content Data Interfaces)
├── 📄 .env.example # Configuration template reference for new dev teams
├── 📄 Dockerfile # Container Image Blueprint (Alpine Base)
├── 📄 astro.config.mjs # Astro configuration for Node Server target (Standalone)
├── 📄 components.json # Shadcn CLI Registry
└── 📄 tsconfig.json # Engine Pathing Typescript Setup (*Alias resolution*)
- Clone this repository as a skeleton/template for new projects.
- Prepare the environment configuration file. This project will refuse to work (Crash/Error) if mandatory Env variables are not filled.
cp .env.example .env
- Open the
.envfile and provide accurate Backend API Path configurations. (E.g.,API_BACKEND_URL). - Install all package modules:
npm install
- Installation of Additional Components (Optional):
This application is prepared with the Shadcn UI registry. If you want to design new forms or dialogs, use its execution command:
npx shadcn@latest add <component-name>
- Start the local Astro Server:
npm run dev
To avoid setup errors in a new client's project environment, always follow these 3 Overhaul Pillars:
- Modify Types: Restructure the
ArticlePayload interface insrc/types/*.tsadapting to the new client's Headless CMS JSON response. - Change JSON-LD Business Information: Visit
src/pages/index.astro, then replace the "LocalBusiness" company name, "Telephone", and "Address" in the JSON-LD Schema block. - Environment Rule Registration: If the new CMS requires a different token (Example:
BEARER_TOKEN), promptly declare it inside thesrc/config/env.server.tsfile as az.string()type instruction sequence.
If you want to experience the real performance before putting it into a container:
npm run build
# This will create /dist/server/ and /dist/client/ folders
# Run the built local host with:
node dist/server/entry.mjsThe configured application is highly compatible with Linux servers (Dockerized):
docker build -t astro-enterprise-app .
docker run -d -p 4321:4321 \
-e PUBLIC_SITE_URL=https://new-domain-name.com \
-e API_BACKEND_URL=https://target-cms.com \
--name web_frontend astro-enterprise-app(It is recommended to place an Nginx Reverse Proxy in front of that 4321 Port while attaching an SSL certificate).
Developed with maximum effectiveness. Feel free to use it as the foundational reference in every SSR project of your dreams. ✨