Scully

Scully Review and Features

Written by Daniel Woloszyn

Last update: 6/11/2024

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

[@portabletext/react] Unknown block type "showcase", specify a component for it in the `components.types` prop

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.

[@portabletext/react] Unknown block type "prosCons", specify a component for it in the `components.types` prop