Skip to main content

​
Installation

Adding Scully to your Angular project is quick and straightforward. The installation process uses Angular schematics to automatically configure everything you need.

​
Prerequisites

Before installing Scully, ensure your project meets these requirements:
  • Angular 12+: Use Scully v2.0.0 or higher (recommended)
  • Angular 9-11: Use Scully v1.1.1 (security updates only)
  • Node.js 12 or higher is required
  • Verify your version: node --version
  • Your project must have the Angular Router installed and configured
  • At least one route must be defined in your application
  • Scully uses Chromium for rendering
  • Your OS and administrator rights must allow Chromium installation and execution
  • Supported platforms: Windows, Linux, macOS
If your Angular app doesn’t have routing configured yet, see the Router Setup section below before proceeding.

​
Quick Installation

Install Scully with a single command: 
ng add @scullyio/init
If your app is running with ng serve during installation, you must restart the development server after installation completes.

​
What Gets Installed

The ng add @scullyio/init schematic automatically:
1

Installs Dependencies

Adds @scullyio/scully and @scullyio/ng-lib packages to your project
2

Creates Configuration

Generates a scully.<projectName>.config.ts file in your project root
3

Updates Package.json

Adds Scully build scripts to your package.json
4

Configures Scully Module

Imports and configures the Scully Angular module in your app

​
Configuration File

After installation, you’ll find a new configuration file: scully.<projectName>.config.ts
scully.<projectName>.config.ts
import { ScullyConfig } from '@scullyio/scully';

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: '<projectName>',
  outDir: './dist/static',
  routes: {},
};

​
Configuration Properties

​
projectRoot
string
default:"./src"
Path to your Angular project’s source directory
​
projectName
string
required
Name of your Angular project (matches your angular.json project name)
​
outDir
string
default:"./dist/static"
Directory where Scully outputs pre-rendered static files
​
routes
object
default:"{}"
Configuration for routes with parameters. Empty by default for simple routes.
Routes without parameters work automatically with this basic configuration. Routes with parameters (like /user/:id) require additional configuration in the routes object.

​
Setting Up Angular Router

If your project doesn’t have the Angular Router configured, set it up before installing Scully:

​
Add Router Module

ng generate module app-routing --flat --module=app

​
Add a Route

Create at least one route in your application: 
# Generate a lazy-loaded route
ng generate module home --route home --module app
This creates a new module with routing configuration and adds it to your app.
Scully requires routing - The router module is essential for Scully to discover and pre-render your pages.

​
Platform-Specific Setup

​
Windows Subsystem for Linux (WSL)

WSL requires additional setup because it doesn’t include Chrome by default:
1

Install Chrome in WSL

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install ./google-chrome-stable_current_amd64.deb
2

Configure Puppeteer Launch Options

Update your scully.<projectName>.config.ts with WSL-specific Puppeteer settings:
scully.<projectName>.config.ts
import { ScullyConfig } from '@scullyio/scully';

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: '<projectName>',
  outDir: './dist/static',
  routes: {},
  puppeteerLaunchOptions: {
    args: [
      '--disable-gpu',
      '--renderer',
      '--no-sandbox',
      '--no-service-autorun',
      '--no-experiments',
      '--no-default-browser-check',
      '--disable-dev-shm-usage',
      '--disable-setuid-sandbox',
      '--no-first-run',
      '--no-zygote',
      '--single-process',
      '--disable-extensions'
    ]
  }
};

​
Verify Installation

Confirm Scully is installed correctly: 
# Verify the config file exists
ls scully.*.config.ts
You should see Scully-related scripts in your package.json, typically:
  • scully - Run the Scully build
  • scully:serve - Serve the pre-rendered static site

​
Next Steps

With Scully installed and configured, you’re ready to build your first pre-rendered Angular app!

Quick Start Guide

Follow our step-by-step guide to build and serve your first static Angular site

​
Troubleshooting

  • Ensure you have administrator rights
  • Try running your terminal as administrator
  • Check that your antivirus isn’t blocking Chromium installation
  • Restart your development server (ng serve)
  • Clear your node_modules and reinstall: rm -rf node_modules && npm install
  • Verify the packages are in your package.json
  • Check your internet connection and proxy settings
  • Try setting the PUPPETEER_SKIP_CHROMIUM_DOWNLOAD environment variable and manually install Chrome
  • For corporate networks, configure npm proxy settings
If you encounter errors during installation, check the GitHub Issues for similar problems or create a new issue with details about your environment.

Build docs developers (and LLMs) love

Get started for freeTalk to us