Scully

Scully is the Angular answer for Jamstack. Created by experts at HeroDevs it is probably the only static site generator based on Google's JS framework, opening the possibilities of Jamstack for all Angular projects.

Written by:
  • Daniel Woloszyn

    Daniel Woloszyn

Last update: October 28, 2020
  • Scully logo
  • JS framework: Angular
  • Core Maintainer: HeroDevs. LLC
  • Website: scully.io
  • Founded: 2015
  • Github Stars:

Last update: October 28, 2020

Scully is quite a fresh solution - the first commit, created by Jorge Cano, was on 12 December 2019. After a few months of work, there is a stable 1.0.0 release, which means it is production-ready for real-world projects.

Angular integration

Scully integrates with any existing Angular project - you only need to run one setup command. This approach makes it trivial to turn your website static.

An interesting feature of Scully is the implementation of machine-learning - it uses Guess.js to find all routes of your site and pre-render each page to plain HTML and CSS.

File structure

β”œβ”€β”€ ... Angular application files
β”œβ”€β”€ dist
β”œβ”€β”€ .scully
β”‚   └── settings.yml
β”œβ”€β”€ scully
β”‚   β”œβ”€β”€ plugins
β”‚   β”‚   └── plugin.ts
β”‚   └── ts.config.json
└── scully.[your-project-name].config.ts

Running Scully in your project creates only a few elements and all of them are simple configuration files where you can change the project’s settings, add plugins, and customize the tool’s behavior.

Ecosystem

Despite Scully being quite young it already provides a way of creating custom plugins, integration with API, and 3rd-party scripts. There is a small library of plugins with an in-depth description of the installation and setup of each one.

Showcase

  • 1-800 Contacts

    Visit
  • notiz.dev

    Visit
  • ConfigCat

    Visit

How to get started?

If you already have an Angular application created, run just one command:

ng add @scullyio/init.

Alternatively, for non-Angular workspaces, install Scully package with

npm install @scullyio/init

and then create a project using

nx g @scullyio/init:install -- --project=<projectName> command.

To build the project, run:

ng build --prod

After the project is built you can run Scully using npm run scully. That’s it. A more in-depth description of the process, along with solutions to potential problems, you’ll find in Scully’s documentation.

Conclusion

For now, Scully is the only static site generator made specifically for Angular. It is a great choice if you want to turn an existing project into a static website or you just want to try out the Jamstack approach in Angular enviroment.

Features
  • A flexible and extensible plugin system to bake your own functionality into Scully's processes.
  • Use of machine learning to find routes of your website and create plain HTML and CSS.
  • Easy setup and integration with existing Angular projects.
Use Cases
  • Existing Angular projects.

Compare Scully with

  • Next.js logo
  • Gatsby logo
  • Nuxt.js logo
  • Eleventy logo
  • Gridsome logo
  • Hugo logo
  • Jekyll logo
  • Bridgetown logo