ScullyConfig
The ScullyConfig interface is the main configuration object for Scully. It defines how Scully processes your Angular application and generates static files.
Interface Definition
export interface ScullyConfig {
bareProject?: boolean;
projectName?: string;
projectRoot?: string;
spsModulePath?: string;
sourceRoot?: string;
defaultPostRenderers?: (string | symbol)[];
homeFolder?: string;
outDir?: string;
outHostFolder?: string;
distFolder?: string;
hostFolder?: string;
inlineStateOnly?: boolean;
routes: RouteConfig;
extraRoutes?: string | string[] | Promise<string[] | string>;
appPort?: number;
thumbnails?: boolean;
staticPort?: number;
reloadPort?: number;
proxyConfig?: string;
puppeteerLaunchOptions?: PuppeteerNodeLaunchOptions;
hostName?: string;
hostUrl?: string;
guessParserOptions?: GuessParserOptions;
maxRenderThreads?: number;
ignoreResourceTypes?: string[];
handle404?: string;
target?: string;
}
Properties
bareProject
- Type:
boolean (optional)
- Default:
false
Indicates whether this is a bare project without an angular.json file.
projectName
- Type:
string (optional)
- Provided by: Scully
The name of the project being processed. This is automatically provided by Scully and read from angular.json.
projectRoot
The folder where the project is located. Can be any of the projects in a monorepo, read from angular.json.
{
projectRoot: './apps/my-app/src'
}
spsModulePath
Path to the module for the Scully Platform Server Renderer (SPS).
{
spsModulePath: './src/app/app.sps.module.ts'
}
sourceRoot
The folder where the project sources reside, read from angular.json.
defaultPostRenderers
- Type:
(string | symbol)[] (optional)
- Default:
[]
Array of post-renderer plugin IDs that will be run on all routes.
{
defaultPostRenderers: ['seoHrefOptimise', 'critters']
}
homeFolder
The root of the project where angular.json lives. Used internally by Scully.
outDir
- Type:
string (optional)
- Default:
'./dist/static'
The destination folder where Scully will write the generated static files.
{
outDir: './dist/static/my-site'
}
The outDir should not be the same as the distFolder.
outHostFolder
- Type:
string (optional)
- Default: Same as
outDir
The folder used by the Scully server to serve the generated files.
distFolder
The location of the Angular application’s distribution files. Should be a subfolder of dist. Scully uses this folder during rendering.
{
distFolder: './dist/apps/my-app'
}
hostFolder
- Type:
string (optional)
- Default: Same as
distFolder
The folder used to serve the Angular distribution files.
inlineStateOnly
- Type:
boolean (optional)
- Default:
false
When true, transfer state is only inlined into the page and no separate data.json file is written.
{
inlineStateOnly: true
}
routes
- Type:
RouteConfig (required)
Configuration for routes that need additional processing. See RouteConfig for details.
{
routes: {
'/blog/:slug': {
type: 'contentFolder',
slug: {
folder: './blog'
}
}
}
}
- Type:
string | string[] | Promise<string[] | string> (optional)
Additional routes that exist in the application but have no route in the Angular router. Can be routes from other frameworks or dynamically generated routes.
{
extraRoutes: ['/hidden-page', '/special-route']
}
{
extraRoutes: Promise.resolve(['/async-route-1', '/async-route-2'])
}
appPort
- Type:
number (optional)
- Default:
1864
Port number where the Angular application is served during rendering.
thumbnails
- Type:
boolean (optional)
- Default:
false
Determines whether site thumbnail files should be saved.
staticPort
- Type:
number (optional)
- Default:
1668
Port number where the Scully-generated static files are served.
reloadPort
Port for the live reload service.
proxyConfig
Path to a proxy configuration file. Uses the same format as Angular CLI’s proxy config.
{
proxyConfig: 'proxy.conf.js'
}
puppeteerLaunchOptions
- Type:
PuppeteerNodeLaunchOptions (optional)
Custom launch options for Puppeteer. See PuppeteerOptions for details.
{
puppeteerLaunchOptions: {
headless: true,
args: ['--no-sandbox']
}
}
Some settings may interfere with Scully’s rendering process and create inaccurate results.
hostName
- Type:
string (optional)
- Default:
'localhost'
Hostname to use for the local server.
hostUrl
Use an external server instead of Scully’s built-in server.
{
hostUrl: 'http://my-custom-server:3000'
}
guessParserOptions
- Type:
GuessParserOptions (optional)
Options passed to the guess-parser library for route discovery.
{
guessParserOptions: {
excludedFiles: ['src/app/admin/admin-routing.module.ts']
}
}
maxRenderThreads
- Type:
number (optional)
- Default: Number of CPU cores
Maximum number of concurrent Puppeteer tabs to open during rendering.
ignoreResourceTypes
- Type:
string[] (optional)
Resource types to ignore when rendering pages via Puppeteer (e.g., 'image', 'font', 'stylesheet').
{
ignoreResourceTypes: ['image', 'font']
}
handle404
- Type:
string (optional)
- Default:
''
How to handle 404 routes in the Scully server.
| Value | Behavior |
|---|
'' (default) | Render a 404 page and raise a warning |
'index' | Render the index.html from dist root |
'baseOnly' | Use express route matcher on unhandled routes only |
'404' | Render the 404.html from dist root |
'none' | Leave it to the express layer |
{
handle404: 'baseOnly'
}
target
- Type:
string (optional)
- Default:
'architect'
Specifies the project target property to use.
Complete Example
import { ScullyConfig } from '@scullyio/scully';
export const config: ScullyConfig = {
projectRoot: './src',
projectName: 'my-blog',
outDir: './dist/static',
distFolder: './dist/my-blog',
defaultPostRenderers: ['seoHrefOptimise'],
maxRenderThreads: 4,
routes: {
'/blog/:slug': {
type: 'contentFolder',
slug: {
folder: './blog'
}
},
'/user/:id': {
type: 'json',
id: {
url: 'https://api.example.com/users',
property: 'id'
}
}
},
extraRoutes: ['/about', '/contact'],
appPort: 4200,
staticPort: 1668,
puppeteerLaunchOptions: {
headless: true,
args: ['--no-sandbox', '--disable-setuid-sandbox']
},
handle404: 'baseOnly'
};
