Skip to main content

​
Build Command

The build command is the default command that processes your Angular application and generates static HTML files for all routes.

​
Usage

npx scully
Or explicitly: 
npx scully build

​
What It Does

The build process performs the following steps:
  1. Configuration Loading - Loads the Scully configuration from scully.config.ts
  2. Route Discovery - Analyzes the Angular application to discover all routes
  3. Route Data Collection - Pulls in route-specific data (blog posts, content files, etc.)
  4. Page Rendering - Renders each route using Puppeteer or Playwright
  5. Static File Generation - Writes the rendered HTML to the output directory

​
Output

By default, Scully generates static files in the ./dist/static directory. Each route becomes a static HTML file: 
dist/static/
├── index.html
├── about/
│   └── index.html
├── blog/
│   ├── index.html
│   ├── post-1/
│   │   └── index.html
│   └── post-2/
│       └── index.html

​
Common Options

​
Watch Mode

Automatically rebuild when files change: 
npx scully --watch

​
Production Mode

Build with production optimizations: 
npx scully --prod

​
Scan Routes

Force Scully to scan for new routes: 
npx scully --scanRoutes

​
Route Filtering

Build only specific routes: 
npx scully --routeFilter="/blog/*"

​
Clean Build

Remove previous static files before building: 
npx scully --removeStaticDist

​
Build Performance

Monitor build performance with statistics: 
npx scully --stats
This generates a scullyStats.json file with detailed timing information: 
{
  "numberOfRoutes": 51,
  "generatingTime": 55.63,
  "routesPerSecond": 0.92,
  "findingRoutesAngular": 2.71838,
  "routeDiscovery": 0.00026,
  "renderingPages": 52.21755
}

​
Performance Metrics Explained

  • numberOfRoutes - Total routes processed
  • generatingTime - Total build time in seconds
  • routesPerSecond - Build throughput
  • findingRoutesAngular - Time spent discovering routes
  • routeDiscovery - Time spent pulling route data
  • renderingPages - Time spent rendering HTML

​
Build Output Example

Typical build output: 
$ npx scully

Scully version : 2.1.0
Warming up...
Loading configuration...
Finding routes...
Discovering route data...
Rendering pages...

Total time used 55.63 seconds
  51 pages have been created
  Rendering the pages took 52.22 seconds
  That is 0.92 pages per second,
  or 1024 milliseconds for each page.

  Finding routes in the angular app took 2.72 seconds
  Pulling in route-data took 0.00 seconds

​
Debug Mode

Run with visible Chromium browser for debugging: 
npx scully --showBrowser
This opens a Chromium window so you can see exactly what Scully is rendering.

​
Configuration File

Specify a custom configuration file: 
npx scully --configFile=scully.custom.config.ts

​
Project Selection

In a monorepo, specify which project to build: 
npx scully --project=myapp

​
Error Handling

​
Plugin Errors

By default, Scully exits on plugin errors. To continue despite errors: 
npx scully --pluginsError=false

​
Show Guess Errors

Display routing errors from the Guess parser: 
npx scully --showGuessError

​
Advanced Usage

​
Server Timeout

Increase timeout for large projects: 
npx scully --serverTimeout=30000
Default timeout is 10 seconds (10000 milliseconds).

​
Base Filter

Filter unhandled routes with wildcards: 
npx scully --baseFilter="/someRoute*,/other*"

​
Custom Plugin Folder

Specify a custom plugin directory: 
npx scully --pluginFolder=./custom-plugins

​
Build Hooks

Scully executes several hooks during the build process:
  1. beforeAll - Before any processing starts
  2. routeDiscoveryDone - After routes are discovered
  3. beforeEach - Before each route is rendered
  4. afterEach - After each route is rendered
  5. allDone - After all routes are processed
Configure hooks in scully.config.ts to customize the build process.

​
CI/CD Integration

For continuous integration environments: 
npx scully --noPrompt --prod
The --noPrompt flag prevents interactive prompts, making it suitable for automated builds.

​
Troubleshooting

​
Build Hangs or Times Out

Increase the server timeout: 
npx scully --serverTimeout=60000

​
Routes Not Found

Force route scanning: 
npx scully --scanRoutes

​
Memory Issues

For large sites, you may need to increase Node’s memory: 
NODE_OPTIONS="--max-old-space-size=4096" npx scully

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us