Scully

https://scully.io/docs/
Admin
Scully is a static site generator for Angular that makes building, testing, and deploying Jamstack...
Tokens:63,399
Snippets:629
Trust Score:8.3
Update:4 hours ago
Show doc for...
Tokens:
Raw
### Install and generate Scully for vanilla NX projects

Source: https://scully.io/docs/Reference/schematics/create-scully-files-with-ng-add/

For vanilla NX projects, first install the `@scullyio/init` package, then run the `install` schematic with the project name.

```bash
npm install @scullyio/init
```

```bash
nx g @scullyio/init:install -- --project=<projectName>
```

--------------------------------

### Install the sitemap plugin with npm

Source: https://scully.io/docs/Reference/plugins/community-plugins/sitemap/

Install the `@gammastream/scully-plugin-sitemap` package as a dev dependency.

```bash
npm install @gammastream/scully-plugin-sitemap --save-dev
```

--------------------------------

### Example URL for checking static file

Source: https://scully.io/docs/learn/getting-started/tips-for-testing/

When a static file seems incorrect, start the Scully server and visit a route like this to check the rendered content. If the page looks correct but the static file is partial, the issue may be zoneJS idle detection.

```text
Copyhttp://localhost:1864/a/path/in/my/app
```

--------------------------------

### Install with yarn

Source: https://scully.io/docs/Reference/plugins/community-plugins/amp-css/

Install the scully-plugin-amp-css package as a dev dependency using yarn.

```bash
yarn add scully-plugin-amp-css --dev
```

--------------------------------

### Install with npm

Source: https://scully.io/docs/Reference/plugins/community-plugins/amp-css/

Install the scully-plugin-amp-css package as a dev dependency using npm.

```bash
npm install scully-plugin-amp-css --save-dev
```

--------------------------------

### Install scully-plugin-minify-html with yarn

Source: https://scully.io/docs/Reference/plugins/community-plugins/minifyHtml/

Install the plugin using yarn. The html-minifier package is installed automatically.

```bash
$ yarn add scully-plugin-minify-html
```

--------------------------------

### Install scully-plugin-toc with npm

Source: https://scully.io/docs/Reference/plugins/community-plugins/toc/

Install the plugin as a dev dependency using npm.

```bash
Copynpm i scully-plugin-toc --save-dev
```

--------------------------------

### Install scully-plugin-meetup with npm

Source: https://scully.io/docs/Reference/plugins/community-plugins/meetup/

Install the plugin as a dev dependency using npm.

```bash
Copy$ npm install scully-plugin-meetup --save-dev
```

--------------------------------

### Install PrismJS and generate highlight service

Source: https://scully.io/docs/Reference/utilities/prism-js/

Commands to install PrismJS and generate an Angular service for highlighting.

```bash
npm i --save prismjs
ng g s highlight
```

--------------------------------

### Install scully-plugin-time-to-read with npm

Source: https://scully.io/docs/Reference/plugins/community-plugins/time-to-read/

Install the plugin as a dev dependency using npm.

```bash
Copy$ npm install scully-plugin-time-to-read --save-dev
```

--------------------------------

### Install Playwright plugin package

Source: https://scully.io/docs/Reference/routRenders/playwright/

Install the @scullyio/scully-plugin-playwright package using npm.

```bash
Copynpm i @scullyio/scully-plugin-playwright
```

--------------------------------

### Apply styles to app-root-scully

Source: https://scully.io/docs/Reference/plugins/built-in-plugins/flashPrevention/

CSS example showing how to update styles to apply to both app-root and app-root-scully, as required for the plugin to work correctly.

```css
// BEFORE
app-root {
  ... some styles;
}

// AFTER
app-root,
app-root-scully {
  ... some styles;
}
```

--------------------------------

### Example of pre-rendered routes for `/user/:userId`

Source: https://scully.io/docs/faq/

Shows how Scully can turn `/user/:userId` into a list of meaningful pre-renderable routes like `/user/1`, `/user/2`, etc.

```text
Copy/user/1
/user/2
/user/3
...
/user/100
```

--------------------------------

### Install SPS packages

Source: https://scully.io/docs/Reference/routRenders/sps/

Install the required packages for the SPS renderer: @angular/platform-server and @scullyio/platform-server.

```bash
Copynpm i @angular/platform-server
npm i @scullyio/platform-server
```

--------------------------------

### Example URL

Source: https://scully.io/docs/concepts/unhandled-routes/

Shows a typical application URL that contains an unhandled route path.

```text
Copyhttp://localhost:4200/docs/concepts/unhandled-routes
```

--------------------------------

### Example routes list

Source: https://scully.io/docs/Reference/plugins/types/route-process/

A list of example routes that might be configured by a route process plugin. This is used to illustrate the need for removing specific routes.

```text
/user/1
/user/2
/user/3
/user/4
/user/5
```

--------------------------------

### Install with NPM

Source: https://scully.io/docs/Reference/plugins/community-plugins/canonical/

Install the scully-plugin-canonical package as a dev dependency using NPM.

```bash
npm install scully-plugin-canonical --save-dev
```

--------------------------------

### Install @notiz/scully-plugin-medium-zoom with npm

Source: https://scully.io/docs/Reference/plugins/community-plugins/mediumZoom/

Install the plugin as a dev dependency using npm. Run this command in your project root.

```bash
npm install @notiz/scully-plugin-medium-zoom --save-dev
```

--------------------------------

### Install with Yarn

Source: https://scully.io/docs/Reference/plugins/community-plugins/canonical/

Install the scully-plugin-canonical package as a dev dependency using Yarn.

```bash
yarn add scully-plugin-canonical --dev
```

--------------------------------

### Serve the static site with Scully

Source: https://scully.io/docs/learn/create-a-blog/generate-new-blog-posts/

Run `npx scully:serve` to start both the Angular distribution server and the Scully static server. The output shows the URLs for both servers.

```bash
npx scully:serve
```

--------------------------------

### Example output of the markdown schematic

Source: https://scully.io/docs/Reference/schematics/create-markdown-files-and-skeleton/

Shows the interactive prompts and the file creation/update output when running the schematic with example answers. The output includes the created files and the updated config.

```bash
Copyng g @scullyio/init:markdown
? What name do you want to use for the module? myMarkdown
? What slug do you want for the markdown file? idFile
? Where do you want to store your markdown files? myMarkdownFolder
? Under which route do you want your files to be requested? md
    ✅️ Update scully.t1.config.ts
CREATE src/app/my-markdown/my-markdown-routing.module.ts (439 bytes)
CREATE src/app/my-markdown/my-markdown.component.html (153 bytes)
CREATE src/app/my-markdown/my-markdown.component.spec.ts (657 bytes)
CREATE src/app/my-markdown/my-markdown.component.ts (516 bytes)
CREATE src/app/my-markdown/my-markdown.component.css (131 bytes)
CREATE src/app/my-markdown/my-markdown.module.ts (424 bytes)
UPDATE scully.t1.config.ts (631 bytes)
UPDATE src/app/app-routing.module.ts (634 bytes)
    ✅️ Blog ./my-markdown-folder/2020-09-17-my-markdown.md file created
CREATE my-markdown-folder/2020-09-17-my-markdown.md (111 bytes)
```

--------------------------------

### Full Scully config example with md plugin

Source: https://scully.io/docs/Reference/plugins/built-in-plugins/md/

A complete example of a Scully config file that imports Java language support and sets up a content folder route for a blog.

```typescript
// scully.your-app.config.ts

import { setPluginConfig, ScullyConfig } from '@scullyio/scully';
import 'prismjs/components/prism-java.js'; // example language support

export const config: ScullyConfig = {
  routes: {
    '/blog/:slug': {
      type: 'contentFolder',
      slug: {
        folder: './blog',
      },
    },
  },
};
```

--------------------------------

### Install Scully packages with npm

Source: https://scully.io/docs/learn/getting-started/manualInstallation/

Use npm to install the required Scully packages: @scullyio/scully and @scullyio/ng-lib.

```bash
Copynpm i @scullyio/scully @scullyio/ng-lib
```

--------------------------------

### Install with Yarn

Source: https://scully.io/docs/Reference/plugins/community-plugins/page-title/

Install the scully-plugin-page-title package as a dev dependency using Yarn.

```bash
yarn add scully-plugin-page-title --dev
```

--------------------------------

### Install with NPM

Source: https://scully.io/docs/Reference/plugins/community-plugins/page-title/

Install the scully-plugin-page-title package as a dev dependency using NPM.

```bash
npm install scully-plugin-page-title --save-dev
```

--------------------------------

### Install critical-css plugin with npm

Source: https://scully.io/docs/Reference/plugins/built-in-plugins/criticalcss/

Install the @scullyio/scully-plugin-critical-css package as a dev dependency.

```bash
Copynpm install -D @scullyio/scully-plugin-critical-css
```

--------------------------------

### Install scully-plugin-fouc with npm

Source: https://scully.io/docs/Reference/plugins/community-plugins/fouc/

Install the plugin as a dev dependency using npm.

```bash
Copy$ npm install @notiz/scully-plugin-fouc --save-dev
```

--------------------------------

### Install scully-plugin-lazy-images with npm

Source: https://scully.io/docs/Reference/plugins/community-plugins/lazyImages/

Install the plugin as a dev dependency using npm.

```bash
npm install @notiz/scully-plugin-lazy-images --save-dev
```

--------------------------------

### Install Scully packages with yarn

Source: https://scully.io/docs/learn/getting-started/manualInstallation/

Use yarn to install the required Scully packages: @scullyio/scully and @scullyio/ng-lib.

```bash
Copyyarn add @scullyio/scully @scullyio/ng-lib
```

--------------------------------

### Install http404 plugin with npm

Source: https://scully.io/docs/Reference/plugins/community-plugins/http404/

Install the plugin as a dev dependency using npm. Version 1.0.0 introduces breaking changes in registration and configuration.

```bash
npm install @gammastream/scully-plugin-http404 --save-dev
```

--------------------------------

### Blog post frontmatter example

Source: https://scully.io/docs/learn/create-a-blog/use-blog-post-data-in-template/

Example of frontmatter in a .md blog post file that defines metadata properties accessible via ScullyRoutesService.available$.

```markdown
---
title: blog title
description: blog description
published: true
arbitraryValue: single value
arbitraryArray: [first item, second item]
---
```

--------------------------------

### Install @notiz/scully-plugin-rss with npm

Source: https://scully.io/docs/Reference/plugins/community-plugins/rss/

Install the RSS Feed plugin as a dev dependency using npm.

```bash
Copynpm install @notiz/scully-plugin-rss --save-dev
```

--------------------------------

### Install @gammastream/scully-plugin-regex with npm

Source: https://scully.io/docs/Reference/plugins/community-plugins/regex/

Install the plugin as a dev dependency using npm. This is required before configuring the plugin.

```bash
Copy$ npm install @gammastream/scully-plugin-regex --save-dev
```

--------------------------------

### Full Scully config with puppeteer launch options for GCE

Source: https://scully.io/docs/faq/

Complete ScullyConfig example with puppeteerLaunchOptions including executablePath and a list of Chromium flags. Reported to help with GCE timeout failures.

```typescript
Copyexport const config: ScullyConfig = {
  projectRoot: './pathToRoot',
  projectName: 'nameOfProject',
  outDir: './dist/static',
  routes: {
    /** your route config **/
  },
  defaultPostRenderers,
  puppeteerLaunchOptions: {
    executablePath: '/usr/bin/chromium-browser',
    args: [
      '--no-sandbox',
      '--disable-setuid--sandbox',
      '--headless',
      '--disable-gpu',
      '--disable-dev-shm-usage',
      '--no-default-browser-check',
      '--no-first-run',
      '--disable-default-apps',
      '--disable-popup-blocking',
      '--disable-translate',
      '--disable-background-timer-throttling',
      '--disable-renderer-backgrounding',
      '--disable-device-discovery-notifications',
      '--disable-web-security',
    ],
  },
};
```

--------------------------------

### npx scully serve

Source: https://scully.io/docs/Reference/command-line-options/

Starts the Scully server. This process does not build the project; it only serves the Angular build files and Scully static files.

```bash
npx scully serve
```

--------------------------------

### Example HTML content with TOC placeholder

Source: https://scully.io/docs/Reference/plugins/community-plugins/toc/

Example of a blog post HTML with a div with id 'toc' where the TOC will be inserted. The headings h2 and h3 will be used to generate the TOC.

```html
Copy# my blog post

<div id="toc">
  <h2>Table of contents</h2>
</div>

## heading 1 ### subheading 1 ## heading 2 ### subheading 2
```

--------------------------------

### plugins.ts example

Source: https://scully.io/docs/learn/getting-started/manualInstallation/

Create a plugins.ts file inside the scully/plugins directory with this content to register a custom render plugin.

```typescript
Copyimport { registerPlugin, getPluginConfig } from '@scullyio/scully';

export const myPlugin = 'myPlugin';

const myFunctionPlugin = async (html: string): Promise<string> => {
  return html;
};

const validator = async () => [];

registerPlugin('render', myPlugin, myFunctionPlugin, validator);
```

--------------------------------

### Generate a blog post and observe the output

Source: https://scully.io/docs/learn/create-a-blog/generate-new-blog-posts/

This example shows the command to create a blog post named 'Angular tutorial'. The output prompts for the target folder (default `blog`) and confirms the creation of `blog/angular-tutorial.md`.

```bash
ng generate @scullyio/init:post --name="Angular tutorial"
? What's the target folder for this post? blog
    ✅️ Blog ./blog/angular-tutorial.md file created
CREATE blog/angular-tutorial.md (99 bytes)
```

--------------------------------

### Dockerfile base configuration for Scully with puppeteer

Source: https://scully.io/docs/faq/

Base Docker configuration that installs Chromium and sets PUPPETEER_SKIP_CHROMIUM_DOWNLOAD to true. This is a starting point for running Scully in Docker or CI/CD environments.

```docker
CopyFROM node:12-alpine

RUN apk add --no-cache \
      chromium \
      ca-certificates

ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
```

--------------------------------

### Example: serve static dist with http-server

Source: https://scully.io/docs/faq/

Shows how to serve the generated static site using `http-server` from the `dist/static` directory. This is useful for testing non-generated dynamic routes on a fully featured server.

```bash
Copycd dist/static npx http-server
```

--------------------------------

### Install scully-plugin-minify-html with npm

Source: https://scully.io/docs/Reference/plugins/community-plugins/minifyHtml/

Install the plugin as a dev dependency using npm. The html-minifier package is installed automatically.

```bash
$ npm install scully-plugin-minify-html --save-dev
```

--------------------------------

### Build and run Scully

Source: https://scully.io/docs/Reference/plugins/community-plugins/minifyHtml/

Build the app and then run the Scully command to prerender pages with the minifyHtml plugin.

```bash
npm run build --prod
npx scully
```

--------------------------------

### Install Chrome for WSL

Source: https://scully.io/docs/learn/getting-started/installation/

WSL does not include Chrome, so Puppeteer needs it installed. Download and install the stable Chrome .deb package.

```bash
Copywget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install ./google-chrome-stable_current_amd64.deb
```

--------------------------------

### Install with yarn

Source: https://scully.io/docs/Reference/plugins/community-plugins/disableAngular/

Install the disableAngular plugin using yarn.

```bash
yarn add scully-plugin-disable-angular
```

--------------------------------

### Build and run Scully

Source: https://scully.io/docs/Reference/plugins/community-plugins/regex/

Build the app and run Scully to generate the static site with the regex plugin applied.

```bash
Copynpm run build
npx scully
```

--------------------------------

### Build and run Scully with stats-json

Source: https://scully.io/docs/Reference/plugins/community-plugins/disableAngular/

Build the app with --stats-json flag and run Scully to generate the static site.

```bash
npm run build -- --prod --stats-json
npx scully
```

--------------------------------

### Output after adding blog support

Source: https://scully.io/docs/learn/create-a-blog/add-blog-support/

Expected output after running the blog schematic. It updates configuration and creates a sample markdown file.

```bash
    ✅️ Update scully.{{yourApp}}.config.js
UPDATE scully.{{yourApp}}.config.js (653 bytes)
UPDATE src/app/app-routing.module.ts (726 bytes)
UPDATE src/app/blog/blog-routing.module.ts (429 bytes)
UPDATE src/app/blog/blog.component.css (157 bytes)
UPDATE src/app/blog/blog.component.html (160 bytes)
UPDATE src/app/blog/blog.component.spec.ts (639 bytes)
UPDATE src/app/blog/blog.component.ts (508 bytes)
UPDATE src/app/blog/blog.module.ts (391 bytes)
    ✅️ Blog ./mdblog/2020-03-24-blog.md file created
CREATE mdblog/2020-03-24-blog.md (95 bytes)
```

--------------------------------

### Generate blog support with @scullyio/init:blog

Source: https://scully.io/docs/learn/create-a-blog/add-blog-support/

Run this command to add blog support to an Angular application. It adds the blog module's routes and creates a `./blog` folder for markdown files.

```bash
ng generate @scullyio/init:blog
```

--------------------------------

### Launch Scully test server with npx scully serve

Source: https://scully.io/docs/learn/getting-started/serving/

Run this command to start Scully's test server after building your app. It launches two servers: one hosting the results of ng build and another hosting the Scully build results, allowing you to test both versions.

```bash
Copynpx scully serve
```

--------------------------------

### Install flash-prevention plugin

Source: https://scully.io/docs/Reference/plugins/built-in-plugins/flashPrevention/

Command to install the flash-prevention plugin as a dev dependency.

```bash
npm install -D @scullyio/scully-plugin-flash-prevention
```

--------------------------------

### Install with npm

Source: https://scully.io/docs/Reference/plugins/community-plugins/disableAngular/

Install the disableAngular plugin as a dev dependency using npm.

```bash
npm install scully-plugin-disable-angular --save-dev
```

--------------------------------

### Generate blog support with custom folder using @scullyio/init:markdown

Source: https://scully.io/docs/learn/create-a-blog/add-blog-support/

Use this command to specify a different folder name for markdown files. You will be prompted for module name, slug, source directory, and route.

```bash
ng generate @scullyio/init:markdown
```

--------------------------------

### scullyStats.json example

Source: https://scully.io/docs/Reference/command-line-options/

Example layout of the JSON file generated by the `--stats` flag.

```json
{
  "numberOfRoutes": 51,
  "generatingTime": 55.63,
  "routesPerSecond": 0.92,
  "findingRoutesAngular": 2.71838,
  "routeDiscovery": 0.00026,
  "renderingPages": 52.21755
}
```

--------------------------------

### Build and run Scully with SPS

Source: https://scully.io/docs/Reference/routRenders/sps/

Build your app first with npx ng build, then run Scully with npx scully. The renderer creates ./scully/tsconfig.<project-name>.json and compiles to ./scully/runtime.

```bash
Copy   # first build your app, as Scully still needs the static artifacts
npx ng build 
   # run Scully 
npx scully
```

--------------------------------

### Install version 8 dependencies

Source: https://scully.io/docs/Reference/legacy-support/angular-v8/

Installs dependencies for Angular version 8 using npm.

```bash
npm i
```

--------------------------------

### Confirm blog post file creation

Source: https://scully.io/docs/learn/create-a-blog/generate-new-blog-posts/

This message confirms that the file `angular-tutorial.md` was created in the `blog/` directory.

```bash
CREATE blog/angular-tutorial.md
```

--------------------------------

### Serve Scully static site with npx scully:serve

Source: https://scully.io/docs/learn/create-a-blog/generate-new-blog-posts/

Run this command to serve the static site locally. The blog post will be available at http://localhost:1668/blog/angular-tutorial.

```bash
npx scully:serve

```

--------------------------------

### extraRoutes example

Source: https://scully.io/docs/Reference/config/

Example of the extraRoutes property, which allows adding an array of unhandled routes. These routes can exist in AngularJS, React, or any other framework.

```typescript
CopyextraRoutes: [
  '/foo/:id',
  new Promise('/bar/:barId'),
  new Promise(['/foo/:fooId', '/bar/:id']),
];
```

--------------------------------

### npx scully --tds

Source: https://scully.io/docs/Reference/command-line-options/

Launches the Test Data Server. Only helpful for demos.

```bash
npx scully --tds
```

--------------------------------

### Validator example using yellow from @scullyio/scully

Source: https://scully.io/docs/Reference/scully-api/registerPlugin/

Example of a validator function that checks if numberOfPages is a number and returns an array of errors, using the yellow color from Scully.

```typescript
Copyimport { yellow } from '@scullyio/scully';

// Omitted code ...

const validator = async (options) => {
  const errors = [];

  if (options.numberOfPages && typeof options.numberOfPages !== 'number') {
    errors.push(
      `my-custom-plugin numberOfPages should be a number, not a ${yellow(
        typeof options.numberOfPages
      )}`
    );
  }

  return errors;
};
```

--------------------------------

### Build and run Scully with Playwright renderer

Source: https://scully.io/docs/Reference/routRenders/playwright/

First build your app with ng build, then run npx scully. The Playwright renderer will render routes and output a static site.

```bash
Copy   # first build your app, as Scully still needs the static artifacts
npx ng build
   # run Scully
npx scully
```

--------------------------------

### CSV fileHandler plugin example with registration

Source: https://scully.io/docs/Reference/plugins/types/fileHandler/

Example plugin that wraps CSV content in a code block. Must be registered with registerPlugin and exported via module.exports.

```typescript
Copyfunction csvFilePlugin(raw) {
  return Promise.resolve(`<pre><code>${code}</code></pre>`);
}
// DO NOT FORGET TO REGISTER THE PLUGIN
registerPlugin('fileHandler', 'csv', { handler: csvFilePlugin });
module.exports.csvFilePlugin = csvFilePlugin;
```

--------------------------------

### Install events-polyfill for Internet Explorer 10+

Source: https://scully.io/docs/Reference/legacy-support/polyfills/

Install the events-polyfill package to support Internet Explorer 10+ in Scully V1. This polyfill is required because Scully uses the Event constructor.

```bash
npm install events-polyfill
```
Tokens:
Raw