Scully — First-Ever Static Site Generator for Angular.js

For so many years, Angular didn’t have any static site generator. But finally, here it is - Scully.

What exactly is a static site generator? What does it do?

A static site generator is an alternative to CMS and builds static sites to create blog posts.

Scully is an amazing static site generator built for angular projects by Aaron Frost of HeroDevs. It uses Chromium so you would have the need for its installation and execution.

It analyzes the route structure of the compiled angular application and generates a static version of each page. It seems a bit complex at first but when you come to understand it, it’s as easy as a piece of cake.

“Scully gives developers the necessary tools to JAMstackify any Angular project, including fine-grained control where needed.”

In this blog, we’re going to learn a few basic things about Scully and how it works. Then, let’s move forward-

Key Features of Scully :

Among the most popular JavaScript frameworks, Angular was the only one lacking a static site generator. For instance, React.js and Vue have a lot of SSGs but angular didn’t have any.

Scully is quite similar to Gatsby (React’s SSG), however, it would be cruel to compare these two as Scully has just been created and is still in the alpha phase whereas Gatsby has been here for a while now.

Let’s see what Scully has in-store for us -

Powerful CLI -

The Scully CLI comes with a list of exciting features and command options, such as-

• configFile: It enables the loading of different configuration files.
• proxyConfig: It takes a relative filename for the proxy config file.
• baseFilter: It enables Scully to filter out some specific routes for rendering.
• scanRoutes: It scans the application to discover all the unhandled routes.
• showBrowser: Chromium renders the application
• removeStaticDist: It removes the static folders created from previous renders.
• stats: It saves the build statistics to a json file.
• pluginsError: It shows errors from plugins without stopping the rendering process.
• routeFilter: It filters the handled routes.

There are several other command options that can further extend the functionalities of Scully.

Rich Built-in Plugins -

Plugins are an important part of SSGs and Scully also has an extensive and flexible set of built-in plugins. The plugin system of Scully provides users new ways to pre-render an application. Here we are going to mention five main plugin types that inject the code into various lifecycle stages of Scully-

1. router: The router plugins allow getting the required data to the pre-rendered pages.

2. render: The render plugins are used to modify the rendered HTML content.

3. fileHandler: The fileHandler plugins are used during the rendering process by the contentFolder plugin. Basically, these plugins are used to process static files.

4. routeDiscoveryDone: When all routes are collected and all the router plugins are done, the routeDiscoveryDone are called automatically.

5. allDone: These plugins are called when everything gets completed which means after all the processes are finished.

Schematics -

Scully provides various schematics for three things-

• To create your own blog
• To read markdown files and skeleton
• To create and modify angular projects and run anything needed to support Scully.

There are many other characteristics of Scully that make it even more intriguing, such as third-party integration, centralized configuration, complete data caching, etc.

Now, let’s understand how it works-

How it Works??

Scully pre-renders every page of your app to plain CSS or HTML with the help of Guess.js which finds all the routes in the project.

Scully takes an app, analyzes its route structure, and writes down all the static files to create a list of routes of the application. Then, it goes through that list and generates an index.html for each route. It, then, pre-renders each route to HTML and creates a static version of it. As many as the number of routes, it will create the same number of index.html files.

With a pre-rendered application, users do not have to wait for JavaScript to be loaded executed to interact with the website. Instead, they can immediately interact with the page. It gives you a higher conversion rate and fewer abandoned sessions. Also, you do not need to ship your backend to production.

Scully has two types of routes, i.e.-

• Unhandled Routes
• Handled Routes

When the unhandled routes are run through router plugins, a handled route comes out.

“All unhandled routes with dynamic data need to be handled through route plugins. This means there will be NO STATIC FILES for ROUTES which HAVE DYNAMIC DATA but NO CONFIG.”

Prerequisites -

To add Scully into your project, make sure you meet the following requirements -

• Angular version should be v8.x.x or v9.x.x
• Node.js version should be 12 or higher
• Chromium installed in your machine
• Generate a routing.config.module.ts file by this command-

Installation -

Now, you can add Scully through -

It creates a Scully config file with name scully.<projectName>.config.ts where the projectName stands for the name of your angular project. This config file looks like this-

If you were serving the app during installation, you need to restart it with ng serve. Before we start building our angular project, let’s make sure to set the output path-

//angular.json
"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/boost-angular-app-seo",

Now, the angular build will be added inside the dist/ folder in the folder name boost-angular-app-seo.

Check out more about Scully here.

Wrap Up:

Within a year or two, Scully is going to roll over the entire JavaScript community. Team HeroDevs has a lot in its mind and working hard to convert it to the best SSG platform ever created. We just need to wait and watch, there’s a lot yet to be revealed in Scully.

Stay tuned with us for more interesting blogs.

Thanks for reading!