Learn more about Mintlify

Enter your email to receive updates about new features and product releases.

Testing Guide
Local Development Workflow
Basic Testing Workflow
Watch Mode
Enable Live Reload
Complete Watch Setup
Understanding the Servers
Angular Dev Server (Port 1864)
Scully Static Server (Port 1668)
Debugging Scully
Verbose Output
Scan Routes
Show Browser
Common Testing Scenarios
Testing Blog Posts
Testing Route Configuration
Testing Plugins
Testing Tips
When to Rebuild Angular
When to Run Scully
Static File Verification
Verify Content Rendering
Troubleshooting
Testing Checklist
Performance Testing
Lighthouse
Bundle Analysis
Next Steps

Testing Guide

Testing your Scully site before deployment ensures everything works correctly. This guide covers local testing, debugging, and common workflows.

Local Development Workflow

Basic Testing Workflow

Build Angular Application

First, build your Angular app:

ng build

This compiles your Angular application into the dist folder.

You only need to rebuild Angular when you change Angular code, components, or services. Changes to markdown files, Scully config, or plugins don’t require rebuilding Angular.

Run Scully

Generate static pages:

npx scully

Scully will:

Discover routes from Angular router
Process configured routes
Render pages using Puppeteer
Generate static HTML files in dist/static

Serve Static Site

Test the generated static site:

npx scully serve

This starts two servers:

Angular dev build: http://localhost:1864/
Scully static build: http://localhost:1668/

Always test the Scully static build (port 1668) as this is what gets deployed!

Test in Browser

Open both URLs and verify:

All pages load correctly
Navigation works
Content displays properly
Assets (images, fonts, CSS) load
No console errors

Watch Mode

Enable Live Reload

Watch for changes and rebuild automatically:

npx scully --watch

This will:

Monitor markdown files for changes
Monitor Angular build output
Automatically re-run Scully when changes detected
Live reload the static site

Do not use --watch in production or CI/CD pipelines! It never exits and is meant for development only.

Complete Watch Setup

Run both Angular and Scully in watch mode:

package.json

{
  "scripts": {
    "start": "ng serve",
    "build": "ng build",
    "scully": "npx scully",
    "scully:watch": "npx scully --watch",
    "scully:serve": "npx scully serve",
    "dev": "npm run build && npm run scully:watch"
  }
}

Terminal 1: Build Angular and watch

ng build --watch

Terminal 2: Run Scully in watch mode

npm run scully:watch

Terminal 3: Serve the static site

npm run scully:serve

Understanding the Servers

Angular Dev Server (Port 1864)

The Angular application running with:

Full Angular runtime
Client-side routing
Development mode
All JavaScript active

Use this to:

Debug Angular components
Test Angular functionality
Develop new features

Scully Static Server (Port 1668)

The pre-rendered static HTML:

Pure HTML/CSS
Minimal JavaScript
Production-like behavior
What users actually see after deployment

Use this to:

Test static site generation
Verify SEO metadata
Check page load performance
Test in production-like environment

Debugging Scully

Verbose Output

Enable detailed logging:

npx scully --showBrowser --logLevel verbose

Options:

--showBrowser: Opens Puppeteer browser (see what Scully sees)
--scanRoutes: Force route discovery
--logLevel: Set logging level (verbose, debug, normal, warning, error)

Scan Routes

Force complete route discovery:

npx scully --scanRoutes

Use when:

Adding new routes to Angular router
Route parameters change
Routes not being generated

Show Browser

See what Puppeteer renders:

npx scully --showBrowser

Helpful for:

Debugging rendering issues
Checking if page fully loads
Finding JavaScript errors
Verifying content appears

Common Testing Scenarios

Testing Blog Posts

Create New Post

ng generate @scullyio/init:post --name="Test Post"

Edit Content

Add content to the generated markdown file

Run Scully

npx scully

Check output:

✅ Scully generated 5 pages in 3.2s
   - /
   - /blog/test-post
   - /about
   ...

Test Unpublished Preview

If published: false, find the unpublished slug:

---
title: Test Post
published: false
slugs:
  - ___UNPUBLISHED___abc123xyz
---

Visit: http://localhost:1668/blog/___UNPUBLISHED___abc123xyz

Publish and Test

Update frontmatter:

---
title: Test Post
published: true
---

Rebuild and test:

npx scully
npx scully serve

Visit: http://localhost:1668/blog/test-post

Testing Route Configuration

Test a new route configuration:

scully.config.ts

export const config: ScullyConfig = {
  routes: {
    '/products/:id': {
      type: 'json',
      id: {
        url: 'http://localhost:3000/api/products',
        property: 'id',
      },
    },
  },
};

Start API Server

Ensure your API is running and returns data

Build and Run Scully

ng build
npx scully --scanRoutes

Check Output

Verify routes were generated:

Finding all routes in application.
Route "/products/:id" discovered 10 routes:
  - /products/1
  - /products/2
  ...

Verify Static Files

Check dist/static/products/ for generated pages

Test in Browser

npx scully serve

Visit: http://localhost:1668/products/1

Testing Plugins

Test a custom plugin:

scully.config.ts

import { registerPlugin } from '@scullyio/scully';

registerPlugin('postProcessByHtml', 'test-plugin', async (html, route) => {
  console.log('Processing route:', route.route);
  return html;
});

export const config: ScullyConfig = {
  defaultPostRenderers: ['test-plugin'],
  // ... rest of config
};

Run with verbose logging:

npx scully --logLevel verbose

Check console output for plugin logs.

Testing Tips

When to Rebuild Angular

Run ng build when you change:

Angular components (.ts, .html, .css)
Services or modules
Routing configuration
Angular assets
Dependencies (package.json)

No need to rebuild Angular for:

Markdown content changes
Scully config changes
Plugin modifications
Frontmatter updates

When to Run Scully

Run npx scully when you change:

Markdown files
Scully configuration
Plugins
Route configuration
After rebuilding Angular

Static File Verification

Manually inspect generated files:

# View generated HTML
cat dist/static/blog/my-post/index.html

# Check all generated routes
find dist/static -name "index.html"

# Count generated pages
find dist/static -name "index.html" | wc -l

Verify Content Rendering

Check Source Code:
- Right-click → View Page Source (not Inspect)
- Verify content is in HTML (not just rendered by JavaScript)
- Check meta tags for SEO
Disable JavaScript:
- Disable JavaScript in browser dev tools
- Refresh page
- Content should still be visible
Test Search Engine View:
- Use Google’s Mobile-Friendly Test
- Enter your local or deployed URL
- See how Google renders your page

Troubleshooting

Routes not generating

Problem: Expected routes not in outputSolutions:

# Force route discovery
npx scully --scanRoutes

# Check for route config
# Ensure parameterized routes are configured

Check config:

routes: {
  '/blog/:slug': {
    type: 'contentFolder',
    slug: { folder: './blog' },
  },
}

Verify markdown files exist in ./blog/

Page appears blank or incomplete

Problem: Generated page missing contentSolutions:

Test Angular app first (port 1864):
```
ng serve
```
If broken here, fix Angular app first
Check if Angular is idle:
```
npx scully --showBrowser
```
Watch for JavaScript errors or pending requests

Add manual idle detection:

routes: {
  '/slow-page': {
    type: 'default',
    manualIdleCheck: true,
  },
}

Check for async operations in component

Markdown not rendering

Problem: Raw markdown visible instead of HTMLSolutions:

Check <scully-content></scully-content> in template
Import ScullyLibModule in component module
Verify markdown files in configured folder
Check frontmatter syntax (valid YAML)
Rebuild: npx scully

Scully build is slow

Problem: Scully takes too long to buildSolutions:

export const config: ScullyConfig = {
  // Reduce concurrent renders
  maxRenderThreads: 2,
  
  // Skip unnecessary resources
  ignoreResourceTypes: ['image', 'font', 'stylesheet'],
};

Other tips:

Use --scanRoutes only when routes change
Check for slow API calls in route config
Profile with --logLevel verbose

Port already in use

Problem: Scully serve fails with port errorSolutions:

# Find and kill process using port
lsof -ti:1668 | xargs kill -9
lsof -ti:1864 | xargs kill -9

# Or use different ports
npx scully serve --port 3000 --appPort 4000

Or configure in Scully config:

export const config: ScullyConfig = {
  staticPort: 3000,
  appPort: 4000,
};

Testing Checklist

Before deploying, verify:

Performance Testing

Lighthouse

Test with Lighthouse:

# Install Lighthouse CLI
npm install -g lighthouse

# Start Scully serve
npx scully serve

# Run Lighthouse
lighthouse http://localhost:1668 --view

Target scores:

Performance: 90+
Accessibility: 90+
Best Practices: 90+
SEO: 90+

Bundle Analysis

Analyze Angular bundle size:

# Install analyzer
npm install -g webpack-bundle-analyzer

# Build with stats
ng build --stats-json

# Analyze
webpack-bundle-analyzer dist/your-app/stats.json

Next Steps

Deployment

Deploy your tested site to production

Configuration

Optimize Scully configuration

Troubleshooting

Common issues and solutions

Plugins

Add functionality with plugins

Deployment Guide Scully Angular Library

⌘I

Build docs developers (and LLMs) love

Get started for free Talk to us

Get Started

Core Concepts

Guides

Angular Integration

Testing Guide

Testing Guide

Local Development Workflow

Basic Testing Workflow

Watch Mode

Enable Live Reload

Complete Watch Setup

Understanding the Servers

Angular Dev Server (Port 1864)

Scully Static Server (Port 1668)

Debugging Scully

Verbose Output

Scan Routes

Show Browser

Common Testing Scenarios

Testing Blog Posts

Testing Route Configuration

Testing Plugins

Testing Tips

When to Rebuild Angular

When to Run Scully

Static File Verification

Verify Content Rendering

Troubleshooting

Testing Checklist

Performance Testing

Lighthouse

Bundle Analysis

Next Steps

Deployment

Configuration

Troubleshooting

Plugins

Build docs developers (and LLMs) love

Get Started

Core Concepts

Guides

Angular Integration

​Testing Guide

​Local Development Workflow

​Basic Testing Workflow

​Watch Mode

​Enable Live Reload

​Complete Watch Setup

​Understanding the Servers

​Angular Dev Server (Port 1864)

​Scully Static Server (Port 1668)

​Debugging Scully

​Verbose Output

​Scan Routes

​Show Browser

​Common Testing Scenarios

​Testing Blog Posts

​Testing Route Configuration

​Testing Plugins

​Testing Tips

​When to Rebuild Angular

​When to Run Scully

​Static File Verification

​Verify Content Rendering

​Troubleshooting

​Testing Checklist

​Performance Testing

​Lighthouse

​Bundle Analysis

​Next Steps

Deployment

Configuration

Troubleshooting

Plugins

Build docs developers (and LLMs) love

Testing Guide

Local Development Workflow

Basic Testing Workflow

Watch Mode

Enable Live Reload

Complete Watch Setup

Understanding the Servers

Angular Dev Server (Port 1864)

Scully Static Server (Port 1668)

Debugging Scully

Verbose Output

Scan Routes

Show Browser

Common Testing Scenarios

Testing Blog Posts

Testing Route Configuration

Testing Plugins

Testing Tips

When to Rebuild Angular

When to Run Scully

Static File Verification

Verify Content Rendering

Troubleshooting

Testing Checklist

Performance Testing

Lighthouse

Bundle Analysis

Next Steps