Introduction to Scully
Scully is the best static site generator for Angular projects looking to embrace the Jamstack. It transforms your Angular application into a collection of pre-rendered static pages that load instantly, providing exceptional user experience and SEO benefits.What is Scully?
Scully pre-renders each page in your Angular app to plain HTML and CSS. When a user visits your site, they receive a fully-rendered HTML page that appears instantly - no waiting for JavaScript to download, parse, and execute. Once the static HTML loads, your Angular application bootstraps on top of it, giving you the best of both worlds:Static Performance
Pre-rendered HTML & CSS delivers pages in just a few KBs, appearing instantly even on mobile 3G connections
Full SPA Power
After initial load, your complete Angular SPA takes over with all its dynamic functionality
SEO Optimized
Search engines can crawl and index your content immediately without executing JavaScript
Reduced Backend Load
Pre-render content at build time, potentially eliminating backend dependencies in production
How Does Scully Work?
Scully uses a straightforward process to transform your Angular app:Route Discovery
Scully analyzes your Angular application’s route structure using guess-parser to automatically discover all routes
Page Rendering
For each route, Scully launches a headless browser (Chromium via Puppeteer), visits the route, and captures the fully rendered HTML
Static File Generation
Scully saves each rendered page as a static
index.html file, creating a complete static version of your siteScully works with Angular version 12 and above (v2.0.0+). For Angular versions 9-11, use Scully v1.1.1 (security updates only).
Key Benefits
Instant Page Loads
Users see content immediately without waiting for your entire Angular app to download and bootstrap. This dramatically reduces abandoned sessions and improves conversion rates.Superior SEO
Search engines receive fully-rendered HTML content, making your Angular app as SEO-friendly as a traditional static site.Cost & Security Benefits
When content is fetched at build time, many applications can run without a backend in production, reducing hosting costs and attack surface.Developer Experience
Keep building with Angular - no need to learn a new framework or change your development workflow. Scully integrates seamlessly via Angular schematics.Powerful Plugin System
Scully provides a flexible plugin system that allows you to:- Render Markdown files as HTML pages (perfect for blogs)
- Extract and manipulate route data
- Transform content during the rendering process
- Integrate with external services and APIs
- Customize every aspect of the build process
Get Started
Ready to make your Angular app blazing fast? Follow our getting started guide:Installation
Add Scully to your Angular project with one command
Quick Start
Build your first pre-rendered Angular app in minutes
Platform Support
Scully works on Windows, Linux, and macOS.Learn More
Watch this comprehensive video to learn everything about Scully:Building the Fastest Angular Apps Possible
Complete Scully webinar covering all core concepts and best practices
Community & Support
The Scully core team is available 24/7 to help:- Gitter Channel - Real-time chat with the team and community
- Office Hours - Join the team every Tuesday at noon MDT
- Twitter - DMs are open for questions and discussions
Scully is built and maintained by HeroDevs