Complete Overview of Scully

Introduction

Have you ever tried viewing the source code of your application in angular? The only thing you will notice is <app-root></app-root>. This task of pre-rendering can be done easily by Scully. In this blog, I will guide how to pre-render each page of HTML content on the browser. Let us now understand what Scully is and how to use it for pre-rendering your application.

What is Scully?

Scully is a static site generator for Angular. A static site generator creates static HTML pages from your templates. In a static site, we do not make any API calls for data. Instead, we put all the data on the pages. For example portfolios, blogs, etc. Also, it is not just a static site generator but also a Jamstack tool for Angular. You must be wondering what is Jamstack? So Jamstack is an architecture that is used for making the web faster and more secure. Let us now come back to Scully and check some of the requirements for using it in your application.

• It supports Angular v9.x.x and v10.x.x or higher.
• Node.js version 10 or higher.
• Chromium (your Operating System, as well as its administrator rights must allow its installation and execution).

Apart from all these, your application must be having router installed because Scully depends on the router module of your application.

How does Scully work?

We define routes for our application and Scully goes through the list of that routes and creates an index.html for each of your routes. If you have 100 routes in the application, then 100 index.html will be created.

To understand it let us use it in a simple project. In this project, I have defined two components and two links are there. By clicking on them some text appears. Here is my application:

And here is how the page source looks before using Scully:

Follow these steps:

• Add scully into your project with the given command

ng add @scullyio/init

After successfully running this command you will see a new file named as scully.<projectName>.config.ts

You will need to modify this file in order to cover all your dynamic routes for your application.

• Now you need to build your angular application. This will create a dist folder.

ng build

After this a dist folder will be created.

• Now you ready to run the scully with this command

npm run scully

This will create index.html for each of your routes. You can check this is the dist/static folder.

• Now, finally we can run the application with this command

npm run scully:serve

This command will run two servers. One hosting results of ng build and the second hosting the result of scully build. 

Pros and Cons of Scully

Pros

• The fastest initial load possible. Your app loads instantly on any device.This is because you are pre-rendering your code to a static format so there are no long loading times.
• Best SEO performance.
• Your app can work on a much larger number of devices where JavaScript is disabled or not supported.
• It allows you to create super-fast user experiences.

Cons

• Your code is not secure because you can view the source code by checking the page source.

Conclusion

So we had a look at how Scully uses the routes in our application to generate pre-rendered HTML files. We also understood how it enables better performance for users and also gives better SEO performance. To know more about its process you can click here. So, if you are planning to convert your application into a static site in Angular, then this is the best option.